Лучшее Создание сайта на основе шаблона

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

Сначала определяем основные задачи, на которые будем опираться при создании сайта
​

1. Концепция

Сайт будет посвящен интернет-маркетингу. Это небольшой пробник для меня, поскольку буду в скором будущем писать с нуля на эту тему свой ресурс. Сейчас для представления в глобальной сети одного товара или услуги эффективно и модно создавать Landing Page. Не нужно думать, что это тухлый одностраничник, который можно бесконечно долго листать вниз и не найти ничего подходящего. Мы возьмем лэндинг за основу главной страницы, как рекламную витрину услуги (не по теме - у меня в ВК играет "Бьется в тесной печурке огонь...", классно))). Далее по необходимости будем добавлять внутренние страницы сайта, будем решать все задачи, которые вы, уважаемые участники форума, посчитаете нужными.

На сайте нам необходимо рассказать о следующем:

• Куда попал посетитель;
• Что он может для себя найти полезного на данном ресурсе;
• Почему именно здесь, а не на каком-то другом;

Это основные моменты. Далее второстепенные, но не менее важные:

• Какие цели преследует профессиональный интернет-маркетолог;
• Какие инструменты используются для достижения целей;
• Какие результаты были получены за всю карьеру;

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

2. Инструменты

Для ускорения рабочего процесса нам понадобятся некоторые приложения, инструменты, программы. Набор минимум, который должен быть у каждого начинающего ВМ (будет пополняться по мере необходимости):

• Notepad++
• FileZilla
• Photoshop

На первом этапе этого достаточно. Я не буду говорить о том, что на компьютере должен быть установлен архиватор, что ВМ должен завести себе почтовый ящик... Это уж слишком очевидные вещи, так что, соберитесь с мозгами, друзья.

3. Хостинг и домен.

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

ВАЖНО! Я укажу в теме пароли и логины для всех ресурсов, чтобы вы могли лично зайти и потыкать все кнопочки, которые нужно. То есть нет. Сделаем иначе. Кому реально интересно и кто читает сейчас это предложение, пишите мне в ЛС - вышлю после того, как получу в ЛС слово "жужелица" и плюс в карму за тему=).

4. Выпрямитель

Да-да. Именно выпрямитель. Для рук. Будем учиться делать все правильно. И именно по этой причине я нашел в сети кривой шаблон, который в принципе содержит нужные по моей задумке блоки. Ну что, господа, к делу!

 

Создаем пространство для работы. Хостинг и домен.

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

Для полигона предлагаю качественный и общедоступный хостинг HOSTINGER.

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

1. Заходим на главную страницу и жмем "Создать аккаунт".



Заполняем стандартную форму регистрации (нужно прокрутить страницу вниз, чтобы не видеть вечного предложения "закажите хостинг"):






Проверяем почту, указанную при регистрации и переходим по вложенной ссылке:



Выбираем заказ бесплатного тарифа в появившемся окне:



Выбираем "субдомен" (потому что это бесплатно), вводим пароль (может не отличаться от пароля на аккаунт. Этот пароль для использования администрирования домена.




В следующем окне нужно написать почему выбор упал на них, но не менее 5-и слов. Система иначе не пропустит. Пишите что хотите - их никто не читает по-моему...



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



Теперь нам доступен хостинг с доменом:



С этого момента забываем про хостинг, приступаем к следующему шагу.

 

ПОДБИРАЕМ ШАБЛОН на основе которого будем создавать свой собственный сайт

На просторах интернета я нашел шаблончик по запросу "скачать бесплатно шаблон html лэндинг" и нашел массу всевозможных вариантов. На одном из сайтов с первой странички дернул вот это "что-то": (файл прикреплен к посту).

Он содержит графику, таблицу стилей, настройки и самую важный для нас на этом этапе файл - index.html , в котором мы с вами будем колупаться (какое жуткое слово)...

Распаковываем архив с сайтом у себя в нужной папке (я создаю для каждого актуального проекта папку на рабочем столе).

На этом этапе у нас есть сайт, есть где его размещать, остается связать эти два момента - настроить FTP-доступ. Для этого качаем из сети программу FileZilla. Открываем, устанавливаем программу и переходим к следующему шагу.

 

НАСТРАИВАЕМ FTP ЧЕРЕЗ FILEZILLA

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


СКРОЛЛИМ ВНИЗ:



Здесь получаем все необходимые данные для записи в файлзиллу, чтобы настроить доступ:



Файлзилла запущена, вверху вводим данные, полученные на хостинге:



Следующий шаг - загрузка файлов шаблона на сервер. Для этого в файлзилле в левой колонке находим распакованный архив шаблона (папку), выделяем все файлы и перетаскиваем мышкой в открытую справа папку "public_html".

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

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



Жуть. Так что работы у нас много. Продолжаем.

 

Добавлю, пока не перешел к следующему шагу. Минут за 10 работы превратил его в такой вид:

 

РАЗБИРАЕМ СОДЕРЖИМОЕ АРХИВА САЙТА
И ПРИСТУПАЕМ К РЕДАКТИРОВАНИЮ НУЖНЫХ ФАЙЛОВ

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

В файлзилле в правой колонке это выглядит так:



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

Если запустить файл из архива на компьютере (папки с сайтом, распакованной), то он автоматически должен открыться в notepad++. Если откроется просто в блокноте, то открываем файл индекс.хтмл правой кнопкой мыши и выбираем строку "открыть с помощью notepad++".

Так мы запустим самый важный файл сайта. Но это лишь проверка того, что мы установили редактор. Открывать файл индекс нам нужно не на компьютере, а на сервере при помощи файлзиллы и редактировать его в notepad++.

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


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

С этого момента файлы сайта, которые мы будем открывать через Файлзиллу, автоматически будут запускаться в нотпаде++.



И вот, наш файл "индекс", расположенный на сервере хостера, добытый через файлзиллу, открыт в notepad++:



Теперь переходим к следующему шагу.

 

УРА! МЫ ВИДИМ САЙТ, НО ОН ЧУЖОЙ... ПЕРЕКРАИВАЕМ ТАК, ЧТОБ РОДНОЙ ВЕБ-МАСТЕР НЕ УЗНАЛ!
​

Итак, мы видим в редакторе файл index.html кучу строк, которые нам пока непонятны. Перед редактированием откроем сайт в браузере. И посмотрим, как он отображается:



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

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

Копируем слова "my name" и идем искать их в файле index.html (он должен быть уже открыт в нотпаде):



Когда мы заменим Слова "My name" на другие, нужные нам, необходимо в редакторе нажать crtl+s, чтобы сохранить изменения. И сразу переключиться в окно файлзиллы (оно в свернутом состоянии):



Сразу смотрим, какие строки нам нужно изменить (простой текст, асположенный на странице сайта в редакторе почти всегда выделяется черным цветом, но (!!!) иногда черным может быть выделен какой-нибудь параметр настройки вида объекта или текста, так что смотрите внимательно что редактируете!

Я заменил первую, вторую и четвертую строки. Третью просто удалил вместе с тегами <h3> и </h3>:



Сохранил в редакторе, перешел в фтп (файлзиллу) - там автоматически запрашивается подтверждение на вступление изменений в силу на сайте. Соглашаемся. Идем в браузер, обновляем страницу.



Текст изменился. Но все равно все ужасно некрасиво, криво и косо. Дальше будем разбираться почему. На этом этапе есть задача:

Заменить все тексты страницы на нужные (после этого пойдем дальше).

 

FIRE BUG - незаменимый помощник в куче строк кода, когда не понимаем что и где редактировать

Fire BUG - это расширение, которое помогает с навигацией по файлам настройки обектов страницы сайта. Незаменимый помощник верстальщикам. Я пользуюсь файерфоксом (излюбленный, но часто падающий бра), поэтому установить расширение для своего браузера мне раз плюнуть. Для других (оперы, хрома) ищите на просторах интернета свои расширения. Аналоги существуют, зуб даю.

Когда запускаешь это расширение, сразу можно найти расположение объекта в файле html или в таблице стилей (css):



При наведении указателя на тот или иной объект, внизу (слева) в колонке появляется та самая строка, которой соответствует запись (на сайте это слово Тотальный, в файле это строка, содержащая " <span>ТОТАЛЬНЫЙ</span>".



1. нажатием на эту кнопку мы можем выбирать объект, данные которого нам нужны.
2. во вкладке HTML мы видим присвоенный этому объекту код текстовой разметки (найдите в сети что такое язык гипертекстовой разметки)
3. Стиль... здесь указаны все параметры объекта. В данном случае нам показаны все настройки шрифта, указано что это настройки именно стиля текста и показан файл и строка, где эти данные редактируются. В нотпаде (если обратили внимание) все строки пронумерованы.

В следующем шаге мы будем менять настройки стиля текста.

 

ЗАДАЧА

ВЫЯСНИТЬ ПРИЧИНУ ТОГО, ЧТО НА ЭКРАНЕ ВИДНА ТОЛЬКО ЧАСТЬ БЛОКА С НАДПИСЬЮ , НУЖНО СОЗДАТЬ АДЕКВАТНЫЕ НАСТРОЙКИ ТЕКСТА , ЕГО РАЗМЕРА И ПОЛОЖЕНИЯ НА СТРАНИЦЕ.

Идем в фтп (мы уже знаем, какой файл нам искать - style.css) ВПЕРЕД!


Далее по знакомой схеме:


И файл открывается в редакторе, который нам уже становится родным:



Здесь мы ищем нужныую нам строку, которую узнали при помощи фаербага:





Тут мы видим все настройки для текста "тотальный". Он в файле-руле (index) взят в тег <span>



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

В первую очередь нам нужно уменьшить шрифт. Не так ли? Ищем его в стиле.

\
Изменим размер шрифта до 30 и расстояние между буквами до 12:


Сохраним в нотпаде, потом в файлзиле, потом обновим страницу сайта в браузере.

Вот что получилось


Таким же макаром меняем остальные строки. В нашем случае это <h1> и <p>. Ищем их в стилях и меняем:

Меняем:

Потом <p>:

стало:


Сохраняем, смотрим, что получилось:


Уменьшаем отступы от верхней границы блока каждой из строк:





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

 

Вот что мы имеем на данном этапе: