ЭНЦИКЛОПЕДИЯ СОВРЕМЕННОГО САЙТОСТРОЕНИЯ

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

Тема в разделе "Пошаговые инструкции: создаём одностраничник", создана пользователем Мефистофель, 18 янв 2016.

  1. Мефистофель

    Мефистофель Гуру Команда форума Эксперт

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

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

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

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

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

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

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


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


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

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


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

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

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

    Да-да. Именно выпрямитель. Для рук. Будем учиться делать все правильно. И именно по этой причине я нашел в сети кривой шаблон, который в принципе содержит нужные по моей задумке блоки. Ну что, господа, к делу!
     
    #1
    User_net и Алексей нравится это.
  2. Загрузка...
  3. Мефистофель

    Мефистофель Гуру Команда форума Эксперт

    Сообщения:
    398
    Рейтинг:
    198
    Род занятий:
    Интернет-маркетинг
    Откуда:
    Новосибирск
    Создаем пространство для работы. Хостинг и домен.

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

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

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


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

    [​IMG]

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

    [​IMG]

    [​IMG]


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

    [​IMG]

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

    [​IMG]

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

    [​IMG]


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



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

    [​IMG]

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

    [​IMG]

    С этого момента забываем про хостинг, приступаем к следующему шагу.
     
    #2
    Alex-Kelevra нравится это.
  4. Мефистофель

    Мефистофель Гуру Команда форума Эксперт

    Сообщения:
    398
    Рейтинг:
    198
    Род занятий:
    Интернет-маркетинг
    Откуда:
    Новосибирск
    ПОДБИРАЕМ ШАБЛОН на основе которого будем создавать свой собственный сайт

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

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

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

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

    Вложения:

    #3
  5. Мефистофель

    Мефистофель Гуру Команда форума Эксперт

    Сообщения:
    398
    Рейтинг:
    198
    Род занятий:
    Интернет-маркетинг
    Откуда:
    Новосибирск
    НАСТРАИВАЕМ FTP ЧЕРЕЗ FILEZILLA

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

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


    [​IMG]

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

    [​IMG]

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

    [​IMG]

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

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

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

    [​IMG]

    Жуть. Так что работы у нас много. Продолжаем.
     
    Последнее редактирование: 18 янв 2016
    #4
  6. Мефистофель

    Мефистофель Гуру Команда форума Эксперт

    Сообщения:
    398
    Рейтинг:
    198
    Род занятий:
    Интернет-маркетинг
    Откуда:
    Новосибирск
    Добавлю, пока не перешел к следующему шагу. Минут за 10 работы превратил его в такой вид:
    [​IMG]
     
    #5
  7. Мефистофель

    Мефистофель Гуру Команда форума Эксперт

    Сообщения:
    398
    Рейтинг:
    198
    Род занятий:
    Интернет-маркетинг
    Откуда:
    Новосибирск
    РАЗБИРАЕМ СОДЕРЖИМОЕ АРХИВА САЙТА
    И ПРИСТУПАЕМ К РЕДАКТИРОВАНИЮ НУЖНЫХ ФАЙЛОВ

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

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

    [​IMG]

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

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

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

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

    [​IMG]
    в настройках нужно указать редактор для файлов сайта по умолчанию. Это делается просто:
    [​IMG]
    С этого момента файлы сайта, которые мы будем открывать через Файлзиллу, автоматически будут запускаться в нотпаде++.

    [​IMG]

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


    [​IMG]

    Теперь переходим к следующему шагу.
     
    #6
  8. Мефистофель

    Мефистофель Гуру Команда форума Эксперт

    Сообщения:
    398
    Рейтинг:
    198
    Род занятий:
    Интернет-маркетинг
    Откуда:
    Новосибирск
    УРА! МЫ ВИДИМ САЙТ, НО ОН ЧУЖОЙ... ПЕРЕКРАИВАЕМ ТАК, ЧТОБ РОДНОЙ ВЕБ-МАСТЕР НЕ УЗНАЛ!
    Итак, мы видим в редакторе файл index.html кучу строк, которые нам пока непонятны. Перед редактированием откроем сайт в браузере. И посмотрим, как он отображается:

    [​IMG]

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

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

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

    [​IMG]

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

    [​IMG]

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

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

    [​IMG]

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

    [​IMG]

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

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

    Мефистофель Гуру Команда форума Эксперт

    Сообщения:
    398
    Рейтинг:
    198
    Род занятий:
    Интернет-маркетинг
    Откуда:
    Новосибирск
    FIRE BUG - незаменимый помощник в куче строк кода, когда не понимаем что и где редактировать

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

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

    upload_2016-1-18_14-32-36.png

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

    upload_2016-1-18_14-36-53.png

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

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

    Мефистофель Гуру Команда форума Эксперт

    Сообщения:
    398
    Рейтинг:
    198
    Род занятий:
    Интернет-маркетинг
    Откуда:
    Новосибирск
    ЗАДАЧА

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

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

    upload_2016-1-18_15-1-1.png
    Далее по знакомой схеме:


    upload_2016-1-18_15-1-36.png
    И файл открывается в редакторе, который нам уже становится родным:


    upload_2016-1-18_15-2-43.png

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

    upload_2016-1-18_15-3-40.png

    upload_2016-1-18_15-5-7.png

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

    upload_2016-1-18_15-9-48.png

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

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

    upload_2016-1-18_15-11-59.png \
    Изменим размер шрифта до 30 и расстояние между буквами до 12:
    upload_2016-1-18_15-14-45.png


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

    Вот что получилось
    upload_2016-1-18_15-15-44.png


    Таким же макаром меняем остальные строки. В нашем случае это <h1> и <p>. Ищем их в стилях и меняем:
    upload_2016-1-18_15-17-52.png
    Меняем:
    upload_2016-1-18_15-19-6.png
    Потом <p>:
    upload_2016-1-18_15-19-37.png
    стало:
    upload_2016-1-18_15-21-4.png


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


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

    upload_2016-1-18_15-26-23.png

    upload_2016-1-18_15-27-22.png

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

    Мефистофель Гуру Команда форума Эксперт

    Сообщения:
    398
    Рейтинг:
    198
    Род занятий:
    Интернет-маркетинг
    Откуда:
    Новосибирск
    Вот что мы имеем на данном этапе:

    upload_2016-1-18_15-39-37.png
     
    #10
    Jonny нравится это.
  12. Мефистофель

    Мефистофель Гуру Команда форума Эксперт

    Сообщения:
    398
    Рейтинг:
    198
    Род занятий:
    Интернет-маркетинг
    Откуда:
    Новосибирск
    ПОИГРАЛ ШРИФТАМИ, ПОРА И ОЦЕНТРОВКУ ДЕЛАТЬ

    upload_2016-1-18_16-48-1.png

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


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

    upload_2016-1-18_16-50-22.png

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

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

    upload_2016-1-18_16-52-50.png

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

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

    Мефистофель Гуру Команда форума Эксперт

    Сообщения:
    398
    Рейтинг:
    198
    Род занятий:
    Интернет-маркетинг
    Откуда:
    Новосибирск
    ВЫБИРАЕМ ИЗОБРАЖЕНИЕ ДЛЯ ФОНА

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

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

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

    upload_2016-1-18_17-7-24.png
    upload_2016-1-18_17-8-19.png

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

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

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

    upload_2016-1-18_17-15-13.png

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

    Мефистофель Гуру Команда форума Эксперт

    Сообщения:
    398
    Рейтинг:
    198
    Род занятий:
    Интернет-маркетинг
    Откуда:
    Новосибирск
    " И где же все-таки у него кнопка?" (с)к/ф "Электроник"

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

    upload_2016-1-18_17-24-39.png

    upload_2016-1-18_17-26-4.png

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

    upload_2016-1-18_17-30-19.png

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

    Мефистофель Гуру Команда форума Эксперт

    Сообщения:
    398
    Рейтинг:
    198
    Род занятий:
    Интернет-маркетинг
    Откуда:
    Новосибирск
    А вот и следующий шаг. Скоро у нас появится что-то похожее на сайт.

    upload_2016-1-18_19-2-3.png
    Начнем разбирать. Сдесь на первый взгляд все просто, но не нужно делать поспешных выводов. Работы нисколько не меньше, чем в первой части. Здесь мы познакомимся с новым синтаксисом... Так что готовьтесь, господа. Мы будем с вами изучать верстку.
     
    #14
  16. Мефистофель

    Мефистофель Гуру Команда форума Эксперт

    Сообщения:
    398
    Рейтинг:
    198
    Род занятий:
    Интернет-маркетинг
    Откуда:
    Новосибирск
    На все описанное до этого момента у меня ушло бы около 40 минут... но я уже так заколебался писать об этом, вы бы знали...:(:(:(
     
    Последнее редактирование модератором: 18 янв 2016
    #15
  17. Мефистофель

    Мефистофель Гуру Команда форума Эксперт

    Сообщения:
    398
    Рейтинг:
    198
    Род занятий:
    Интернет-маркетинг
    Откуда:
    Новосибирск
    Сейчас мы посмотрим, какие изменения нужно внести в шаблон, чтобы добиться результата, как постом выше.
    так было раньше (в базовом варианте):
    upload_2016-1-18_19-31-39.png

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

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

    upload_2016-1-18_19-49-18.png

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

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

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

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

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

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

    Пример, как использовать фаербаг для определения толщины границ и отступов:
    upload_2016-1-18_20-1-57.png

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

    Мефистофель Гуру Команда форума Эксперт

    Сообщения:
    398
    Рейтинг:
    198
    Род занятий:
    Интернет-маркетинг
    Откуда:
    Новосибирск
    Следующий блок будет выглядеть почти так:

    upload_2016-1-18_20-23-48.png


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

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

    Мефистофель Гуру Команда форума Эксперт

    Сообщения:
    398
    Рейтинг:
    198
    Род занятий:
    Интернет-маркетинг
    Откуда:
    Новосибирск
    В остальных блоках остается только заменить текстовую информацию и все, наш сайт готов!
     
    #18
  20. Мефистофель

    Мефистофель Гуру Команда форума Эксперт

    Сообщения:
    398
    Рейтинг:
    198
    Род занятий:
    Интернет-маркетинг
    Откуда:
    Новосибирск
    ve4naya-reklama.hol.es - это сайт, который нужно допилить, исправить тексты по желанию и у вас будет свой сайт. Успехов!
     
    Последнее редактирование модератором: 19 янв 2016
    #19
    Jonny нравится это.
  21. Мефистофель

    Мефистофель Гуру Команда форума Эксперт

    Сообщения:
    398
    Рейтинг:
    198
    Род занятий:
    Интернет-маркетинг
    Откуда:
    Новосибирск
    Изменил иконки в онлайн фотошопе за 6 минут:

    upload_2016-1-21_20-55-10.png
     
    #20
    Jonny нравится это.
  22. winy13

    winy13 Веб-мастер

    Сообщения:
    80
    Рейтинг:
    29
    Род занятий:
    Графический дизайн, копирайтинг
    Откуда:
    Ростов-на-Дону
    Спасибо! Шикарно, все по полочкам. А главное, мне понравилось, что вы говорите о концепции в самом начале. Многие забывают о столь важном и, в последствие делают кучу ошибок, а потом пытаются собрать во едино все то, что уже натворили :rolleyes:
     
    #21
  23. Botanik3000

    Botanik3000 Веб-мастер

    Сообщения:
    31
    Рейтинг:
    27
    Подробный и познавательный обзор, я много нового и интересного узнал. Сейчас в интернете полно всякой информации на эту тематику, но чтобы так доходчиво и доступно было написано, я не встречал. Спасибо автору, расставил все по своим местам.
     
    #22
  24. Виктор

    Виктор Пользователь

    Сообщения:
    66
    Рейтинг:
    24
    Опять же, объясните мне смысл шаблона? Плодить сайты, которые будут похожи, как две капли воды, друг на друга ? А в чем смысл? Я считаю, что каждый нормальный сайт должен быть сделан полностью с нуля, чтобы быть уникальным и не замыливать глаза шаблонными решениями.
     
    Последнее редактирование модератором: 24 сен 2016
    #23
  25. Кирова Марина

    Кирова Марина Пользователь

    Сообщения:
    34
    Рейтинг:
    24
    На шаблонах можно набить руку, познакомиться с Фаер Багом (инструменты разработчика), увидеть, как оно вообще бывает, и, если не нравится, мотивация изменять и творить свое сама придет - ее обычно не хватает начинающим в создании сайтов. Так что автор большущий молодец, все книжечки по полочкам расставил. Было интересно читать, хоть и не 1 год уже в сайты погружена.
    И, Виктор, сейчас сайтов расплодилось очень много, и шанс, что пользователь посетит более одного сайта с одинаковым шаблоном крайне мал.
     
    Последнее редактирование модератором: 2 окт 2016
    #24