Как сделать конец сайта

Как скопировать сайт и переделать

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

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

Я не в коем случае не призываю вас к копированию чужого авторского права, статья носит исключительно ознакомительный характер :), но иногда действительно в сети можно встретить качественный одностраничник подходящий по вашей тематике.

Или если вы занимаетесь дропшиппингом или зарабатываете на СРА сетях, тогда скопировать лендинг, это вполне нормальная практика.

Ведь можно скопировать и полностью переделать, либо просто ознакомиться с кодом и понять как он устроен, вообщем не буду долго томить, переходим к делу…

Скачать программу Wget

После того как скачали программу, установите ее на свой ПК, следуя инструкции.

Далее нам нужно будет, чтобы программа запускалась в командной строке Windows, для этого откройте раздел “Свойства” вашего компьютера, сделать это можно через кнопку “Пуск“, скрин на экране:

И перейдите в – Дополнительные параметры системы – Переменные среды.

Найдите там запись “Path“, нажмите изменить и добавьте строку C:\Program Files\wget, через кнопку “Создать”

Или следующим по порядку, прописав ;C:\Program Files\wget

Внимание! Я прописываю адрес C:\Program Files\wget, потому что программа Wget уставлена у меня по этому адресу, важно прописать ту строку адреса, куда установилась программа у вас. Необходимо чтобы адрес привел в папку, где есть файл wget.exe

Возможно, адрес который вам придется прописать будет C:\Program Files\GnuWin32\bin

Готово! Программа Wget установлена на вашу операционную систему и готова к работе!

Копируем сайт

После того, как вы нашли сайт донор,зайдите в меню “Пуск” своего ПК и в строке поиска напишите cmd.

Внимание! Прописать все это будет довольно сложно, поэтому просто скопируйте и вставьте:

Комбинация Ctrl+V в командной строке не работает. Только правая кнопка мышки – вставить!

Нажимайте “Enter” – сайт уже скачивается.

Как только процесс завершится, обычно копирование Лендинга занимает не более минуты, найдите архив в следующей папке, по адресу C:/Users/имя пользователя пк, у меня это Эльдар.

Если вы все сделали правильно и сайт не защищен от копирования, то вы найдете папку под названием доменного имени донора, откройте ее и познакомьтесь с вложениями. Сайт полностью готов к работе, открыв файл Index.html вы в локальной версии можете посмотреть его, после внесения необходимых правок, перенесите все файлы на ваш хостинг, например через Filezilla и проверьте.

Иногда бывает, что файлы стилей или скриптов на исходном сайте имеют версии, тогда программа Wget при скачивании дописывает к файлам версию и при просмотре сайта на компьютере в локальной версии, они не будут работать, так как ПК не распознает такие расширения, для этого проверьте все папки со стилями и скриптами и если увидите например:

То просто удалите символы после расширения файла *.js, а именно @v=цифра версии, т. е. у вас должно получиться:

и все будет работать.

Скачиваем все изображения с сайта

В своей практике наблюдаю такое, что при копировании Лендинга, не всегда копируются картинки, фоновые изображения или другие графические файлы. Из-за этого сайт не всегда выглядит как копия, а точнее вообще не похож

Чтобы исправить эту проблему, скачайте и установите себе браузер Mozilla Firefox, откройте на нем сайт донор, нажмите правой кнопкой мыши в любом месте и выберите Информация о странице.

Далее переходите на вкладку “Мультимедия”, нажимайте “Выделить все” и “Сохранить как”. Укажите путь, куда скачать и сохранить все изображения.

Как правило картинки сайта всегда находятся в папках img или images, проверьте есть ли у вас таковые и сохраняйте туда.

При копировании картинок, вы можете обратить внимание на строку адрес (внимание на скрин выше) и сохранить их соответственно в той же иерархии, но уже в своей папке скопированного донора на ПК!

Редактирование скопированного сайта

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

После внесения изменений, сохраните файл и проверьте как все получилось.

Видео инструкция

Завершение

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

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

Но об этом я напишу уже в следующий раз, подписывайтесь на блог, чтобы не пропустить! А если времени ждать у вас нет и поиски в интернете обернулись неудачей, напишите мне и я помогу вам решить эту проблему!

Источник

Сайт на основе одной HTML-страницы

Когда вокруг так много новых технологий, непросто понять, на изучение какой стоит потратить время.
(Karl Seguin)

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

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

Архитектура: Frontend, статический HTTP-сервер, XmlHttpRequest (XHR), REST.

IDE: Notepad, Notepad++ (Windows), Gedit (Linux).

Совместимость: браузер должен поддерживать JavaScript и HTML DOM.

Суть приёма

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

Контент располагается в текстовых файлах и представляет собой текст, отформатированный типовой HTML-разметкой. Ограничений на расположение файлов контента нет, но будет логично, если их разместить в тематических разделах (директориях). Файлы контента не имеют связи с HTML-страницей и могут быть показаны на одной или нескольких HTML-страницах.

Сперва подгружается HTML-страница. Затем определяется и подгружается файл контента. Имя файла контента прописано в URL HTML-ссылки и определяется по правилам REST. Подгрузка файла контента осуществляется через XHR.

Ограничений никаких нет. Дизайн, код, наименования переменных и другие девелоперские соглашения — типовые для подобных разработок. Нет никакой специальной разметки, обычно применяемой для шаблонов.

Всё это немного напоминает SSI, только на Frontend-е.

Как это работает

Считать URL HTML-ссылки и определить параметры:

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

Загрузить и отобразить контент:

В параметре «id» задано расположение файла контента, которое определяется после загрузки HTML-cтраницы:

HTML-ссылка составлена так, что HTML-страница ссылается на саму себя, но с разными значениями параметра «id»:

Для добавления нового контента, надо просто создать файл контента и добавить HTML-ссылку. Расширение файла контента может быть любым, но будет удобнее, если оно будет соответствовать известному MIME-типу, например «txt» или «htm». Так будет проще перенести сайт на внешний ресурс.

Это ключевые аспекты для создания информационного сайта. Интерактивность, при необходимости, может быть добавлена на основе веб-сервисов. Если же используется больше одной HTML-страницы, то можно, например, разработать одно меню для всех страниц, которое будет загружаться по тому же принципу, что и контент. Это облегчит поддержание ссылочной целостности, но расплатой будет лишний XHR запрос.

Как вместо файла контента вставить HTML-страницу

Чтобы в базовую HTML-страницу вставить другую HTML-страницу, проще всего использовать HTML-тег iframe. В этом случае XHR не нужен. В URL надо добавить ещё один параметр, например «iframe», и обрабатывать его при загрузке базовой HTML-страницы:

Ключевое отличие состоит в том, что файл контента встроится в DOM базовой HTML-страницы и будет обработан единым CSS, а HTML-страница, подгруженная в iframe, нет.

Когда HTML-страница расположена не в корне

Бывает нужно разработать не весь сайт, а, например, тематический раздел. Чтобы HTML-ссылки оставались актуальными, надо учитывать путь к разделу:

Так выглядит, например, код примера к статье на GitHub-е.

Готовый шаблон

Если остались вопросы, то можно посмотреть демо сайта (GitHub) и скачать шаблон сайта (GitHub). Демо и шаблон представляют собой готовый макет и наполнены безобидным контентом.

Разработку можно вести на любом статическом HTTP-сервере, установленном локально, а потом перенести «как есть» в любое место сети.

Источник

Готовый код сайта Html + CSS

Ранее я уже дал вам Код сайта на чистом HTML, теперь же применим CSS и напишем блочный шаблон сайта.

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

Итак, такой вот сайт.

Тему грузоперевозок я взял для примера потому, что чаще всего именно люди работающие в этой сфере, обращаются ко мне за помощью.

Но Вы, прочитав статью, сможете сделать всё по своей тематике, и со своей конструкцией каркаса сайта.

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

style >
body <
background : #c0c0c0 ; /* Меняется фон экрана, выбирается здесь */
>

#wrapper < /* Оболочка страницы сайта */
width : 900px ; /* Меняется ширина страницы */
margin : 0 auto ;
background : #f2e8c9 ; /* Меняется задний фон страницы */
>

/* Сайдбар (колонка справа) */

#sidebar < /* Блок сайдбара */
background-color : #ffffff; /* Фон блока */
width : 180px; /* Ширина блока */
padding : 10px; /* Отступ текста от краёв */
float : right; /* Размещаем блок справа от других элементов, наплывание или обтекание справа). Если делать сайдбар слева, то значение right меняем на left */
border-radius : 5px ; /* Закругляем углы блока */
box-shadow : rgba(0,0,0,0.5) 0px 1px 3px ; /* Задаём блоку тень */
>
.marcer < /* Галочки маркеры меню */
float : left ; /* Размещаем слева от текста */
margin : 5px 5px 0 0 ; /* Двигаются вверх-вправо-вниз-влево */
>

#content < /* Блок контента */
margin-bottom : 5px ; /* Отступ блока статьи от блока подвала */
width : 676px ; /* Ширина статьи */
padding : 10px ; /* Отступ текста от краёв блока */
background : #ffffff ; /* Фон статьи */
border-radius : 5px ;
box-shadow : rgba(0,0,0,0.5) 0px 1px 3px ;
>
.left < /* Картинка в тексте слева */
float : left ;
margin : 30px 7px 7px 7px ;
>
.right < /* Картинка в тексте справа */
float : right ;
margin : 7px 0 7px 7px ;
>
/* Подвал */

#footer < /* Блок подвала */
height:80px; /* Высота блока подвала */
background-color : #ffffff ; /* Фон блока подвала */
margin-bottom : 10px ; /* Отступ снизу */
border-radius : 5px ; /* Закруглённые углы */
box-shadow : rgba(0,0,0,0.5) 0px 1px 3px ; /* Тень блока */
>
.clear < /* Запрет наплывания. Устанавливается для того, чтобы блок контента, при заполнении текстом и изображениями не наплывал на подвал */
clear : both ;
>
.fon < /* Номер телефона */
float : left ; /* Разрешаем другим элементам обтекать абзац справа */
margin : 20px 0 0 20px ;
>
.fax < /* Номер факса */
float : left ;
margin : 20px 0 0 60px ;
>
.mail < /* Адрес E-mail */
float : left ;
margin : 20px 0 0 60px ;
>
/style >
/head >
body >
div id =» wrapper «>

h1 >Грузоперевозки /h1 >

p c lass =» nomer «>234-49-50 br > +7 900 650 33 45 /p >

img src =» http://trueimages.ru/img/cf/26/9116df15.png «>
/div >

h3 >На нашем сайте /h3 >

p > img class =» marcer » src =» http://trueimages.ru/img/99/91/dea39f15.png » width =» 10 » height =» 10 «>Наши сотрудники /p >
p > mg class =» marcer » src =» http://trueimages.ru/img/99/91/dea39f15.png » width =» 10 » height =» 10 «>Наша техника /p >
p > img class =» marcer » src =» http://trueimages.ru/img/99/91/dea39f15.png » width =» 10 » height =» 10 «>Прайс

hr width =» 50 » color =» #037FFC » size =» 5 «>

h3 >Другая информация /h3 >
/div >

img class =» left » src =» http://trueimages.ru/img/81/90/b1718f15.png «>

p >Здравствуйте уважаемые будущие веб-мастера! /p >
p >Мне 55 лет и я рад приветствовать Вас на своём сайте.
Этот сайт первый, который я разработал самостоятельно,
а до этого умел только входить в интернет.
Почему я решил его сделать? /p >
p >За те 3 месяца, пока
разбирался в сайтостроении и создавал этот ресурс
обнаружилось, что авторы руководств по созданию
сайтов считают многие нюансы само собой разумеющимися
и не обращают на них внимание. /p >
p >А мне, учитывая
возраст и «опыт», было не просто понять как раз эти
нюансы, они отнимали больше всего времени. И я решил
написать свой материал, так что-бы другим было легче
сориентироваться в потоке новой информации. /p >

img class =» right » src =» http://trueimages.ru/img/0d/64/07a18f15.png «>

p >Здесь
«разжеваны» все мелочи сопровождающие создание сайта,
мимо которых обычно проскакивают другие авторы.
Если вам что-то будет непонятно, спрашивайте, для
меня нет «глупых» вопросов.
Читайе и создавайте свой сайт самостоятельно, каким
бы ни был Ваш возраст и стаж работы на компьютере. /p >
p >Уверен, у Вас получится еще лучше и уж точно, в
несколько раз быстрее, чем у меня. /p >
/div >

div class =» clear «> /div >

div id =» footer «>
p class =» fon «> strong >Телефон: br > 265-48-76 /strong > /p >
p class =» fax «> strong >Факс: br > 265-85-97 /strong > /p >
p class =» mail «> strong >E-mail br >ctoto@mail.ru /strong > /p >

Это код статичного сайта, а это значит, что на экранах с разным расширением, он будет оставаться в неизменных размерах.

То есть на мобилах у него появится полоса горизонтальной прокрутки, которой придётся пользоваться, чтоб просмотреть сайт целиком.

А теперь вернёмся к нашему примеру.

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

Как создать директорию сайта смотрите в статье Создание директории сайта

Для редактирования этого кода, потребуется HTML редактор. У кого он есть, очень хорошо, у кого нет, предлагаю установить Notepad++.

Как начать в нём работу, то есть создать файл, прочитайте здесь.

Когда редактор будет установлен, откройте его, скопируйте из представленного выше кода строки 1 — 6, и вставьте в поле редактора, а затем строки 118 — 153, и так же вставьте в редактор.

Таким образом мы выбрали HTML часть кода, из которой создадим HTML файл. Удалите мою нумерацию строк, создайте файл, назовите его index.html, и сохраните в директорию сайта.

Директория должна приобрести такой вид:

Следующим шагом создаём файл style.css, в котором будет расположена таблица стилей.

Вот тут внимание! Файл style.css, в дальнейшем, будет подключаться ко всем страницам сайта, поэтому в нём нужно собрать стили, формирующие основу страницы.

В дальнейшем, если Вам захочется внести какие-то изменения в конструкцию сайта, достаточно будет внести их в файл style.css, и они отобразятся на всех страницах.

Итак, в директории сайта создаём ещё одну папку, и называем её css.

Затем возвращаемся в редактор, открываем новый документ (первая иконка панели), копируем и вставляем в него строки 8 — 80 и 90 — 116.

Пропускаем только стили оформляющие картинки в тексте, так как они предназначены только для одной страницы.

Убираем мою нумерацию, и сохраняем этот новый документ во вновь созданную папку css, под названием style.css.

Далее откроем файл index.html, и подключим к нему таблицу стилей, то есть файл style.css.

После каждой манипуляции с кодом в редакторе, не забывайте сохранить изменения (третья иконка слева). При этом иконка файла должна из красной стать синей.

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

Следующим шагом разберёмся с изображениями. У меня картинки загружены через сервис trueimages, только для того, чтоб страница открылась у Вас в браузере.

Вам же нужны будут свои изображения, и их нужно сделать, или найти в интернете.

Как сделать картинку для шапки сайта в Paint можно посмотреть в одноимённой статье. Если-же у Вас есть фотошоп, то все изображения лучше делать в нём.

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

Первым делом поменяем шапку сайта. Для этого в файле index.html удалим тег c моей картинкой (строка 124)

Затем в файле style.css удалим селектор img.

Далее, в селекторе #header прописываем уже Вашу картинку

В редакторе это будет смотреться так

Двоеточие в начале адреса изображения ставиться тогда, когда селектор находится в в отдельном css файле. Если стили подключены в html файле, двоеточие в начале адреса не ставится.

Обратите внимание, что размер картинки не должен превышать размер блока header. Определяется он так: щёлкните по файлу картинки правой клавишей, в появившемся меню выбираете «Свойства», и затем, «Подробно», там и будут показаны размеры.

Теперь, если пройти в меню «Запуск», и открыть index.html, то откроется страница с Вашим изображением в шапке сайта.

Меняем остальные картинки (строки 128,129,130,135,141) В отличие от предыдущей, в них нужно изменить только адреса. Удалить адреса моих изображений, и вставить адреса Ваших.

После чего они приобретут примерно такой вид. Название картинки у меня i2.png, а у Вас будет своё.

Ну вот, осталось написать свои заголовки, оформить и подвинуть их туда куда Вам нужно(как это сделать сказано в комментариях к коду), написать свой текст, и главная страница Вашего сайта готова!

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

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

В директории сайта у нас есть папка content. Открываем её и создаём ещё одну папку — rubrica1(у Вас конечно будет своё название). В этой папке создаём ещё две папки — css и images.

В папку css помещаем файл style.css, а в папку images, во первых — основные изображения, которые должны быть на каждой странице (в моём случае это шапка сайта и маркеры меню), и во вторых, Вы поместите туда все картинки, которыми будете оформлять статьи этой рубрики.

Теперь можно создать страницу или статью. Открываем в Notepad++ файл index.html, копируем его, затем открываем «Новый документ», и вставляем в него скопированный файл.

Убираем из этого файла текст, вместе с расположенными в нём изображениями, и глобальные стили. Остаётся чистая страница Вашего сайта.

Сохраняем её в папку rubrica1 под названием: «Заголовок статьи.html». Заголовок статьи в названии файла пишется английскими буквами.

Можно заполнить страницу текстом, и украсить его изображениями. Точно так-же создаются все статьи этой рубрики. Затем делается следующая рубрика и так далее.

Лучше заранее прикинуть, какие рубрики будут в Вашем сайте, создать их, а потом заполнять статьями. Проще потом будет делать навигацию.

Вот мы и подошли к самой, по моему, трудоемкой и нудной фазе создания сайта — навигации. Или меню.

Почему трудоёмкая? Потому, что на каждой странице, и в каждой рубрике сайта, должна быть ссылка на все остальные страницы и рубрики, или что-то вроде этого. Зависит от того, какую навигацию для сайта Вы примените.

Можно с каждой страницы на все остальные, можно меню «Рубрики», а уж из рубрик — меню по страницам. А если этих страниц несколько сотен?

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

Итак, меню делается в общем-то просто. Нужно, лишь, в строку меню, вставить ссылку на другую страницу

Так на каждой странице, после чего наше меню станет активным.

Ну вот вроде бы, в общем, всё. Осталось выложить наше детище в интернет. Как это сделать читайте в статье Шаблон сайта на чистом HTML.

В качестве хостинг провайдера очень рекомендую Бегет

Готовый код различных наворотов для вашего сайта вы можете найти на странице Бесплатные скрипты и CSS эффекты для сайта

Желаю творческих успехов.

Перемена

Источник