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

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

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

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>:

стало:


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


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





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

 

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

 

ПОИГРАЛ ШРИФТАМИ, ПОРА И ОЦЕНТРОВКУ ДЕЛАТЬ



ВОТ ЧТО У МЕНЯ ПОЛУЧИЛОСЬ НА ДАННОМ ЭТАПЕ. КАК ОЦЕНТРОВАЛ - ЧИТАЕМ ДАЛЬШЕ.

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



Сейчас значение параметра position стоит absolute. Раньше было relative. В файле стиля, строка 257. Уже науены - разберетесь, начинайте практиковаться в поиске самостоятельно.

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



Меняйте до тех пор, пока не попадете в точку. Чтобы вычислить точное положение блока, вспоминайте математику, ширина блока (заданная в 1000 пикселей, визуальная ширина минус ширина блока. Чтобы попасть по центру, раньше здесь стояло значение в -405 пикселей. В моем случае я изменил его на -385. То есть подвинул блок немного правее, чем было в изначальном варианте.

Готово. Теперь работаем с оформлением фона. Это следующий шаг.

 

ВЫБИРАЕМ ИЗОБРАЖЕНИЕ ДЛЯ ФОНА

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

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

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




Смотрю под каким именем залито фото фона на сервере.
Для этого есть 2 способа - сравнить изображение визуально или посмотреть в коде.

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


Сохраняем изменения и обновляем страничку сайта.



Огромную кнопку тоже будем уменьшать. Но это следующий шаг.

 

" И где же все-таки у него кнопка?" (с)к/ф "Электроник"

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





Меняем показатели (уменьшаем до 30 пикселей и становимся чуточку счастливее).



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

 

А вот и следующий шаг. Скоро у нас появится что-то похожее на сайт.


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

 

На все описанное до этого момента у меня ушло бы около 40 минут... но я уже так заколебался писать об этом, вы бы знали...

 

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


Задачи следующие:

1. Заменить тексты на тематические.
2. Изменить стиль заголовка и продлить подчеркивание по правого края страницы и дать пояснение мелким шрифтом (отличным от заголовка) о теме страницы.
3. Заменить первый блок текста на фото.
4. уменьшить высоту блока
5. Увеличить отступы блоков слева и справа от края страницы для улучшения внешнего вида.



Подсказки:
1. Сами тексты меняются в файле index.html В большинстве случаев он выделен черным цветом в редакторе нотпад.

Чтобы у блоков с рекомендациями (в моем случае, в вашем может быть что угодно) появились заголовки, нужно найти в сети как в html сделать шрифт жирным и как сделать отступ между строчками Для этого существует несколько тегов. Упрощу задачу, а вы в конце поста просто подберите нужные...

2. Заголовок имеет свой стиль. Нужно найти при помощи фаербага где его менять (цвет, размер и пр.). cделать так, чтобы и левая и правая часть заголовка оставалась в одном теге (в данном случае это <h2>), но имела разный размер шрифта.

3. Найдите правила использования тега <img src...>. Он поможет вставить вместо текста в первом блоке изображение. Просто меняем содержимое с текста на этот тег с небольшими правками. Когда изучите тег - все поймете.

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

5. Для создания отступов (используя фаербаг) обратите внимание не на пиксели, а на проценты и вспомните математику пятого класса.

Пример, как использовать фаербаг для определения толщины границ и отступов:


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

 

Следующий блок будет выглядеть почти так:




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

В настройках этого "экрана нет ничего сложного - просто меняем текст. Когда работа по сайту будет подходить к концу, мы вернемся к доработкам.

 

В остальных блоках остается только заменить текстовую информацию и все, наш сайт готов!

 

ve4naya-reklama.hol.es - это сайт, который нужно допилить, исправить тексты по желанию и у вас будет свой сайт. Успехов!

 

Изменил иконки в онлайн фотошопе за 6 минут: