Как я создавала свой первый сайт и что из этого вышло

Всем привет!

Хочу рассказать о том, как я создавала сайт приюта для животных Друг. Начну с того, что я решила делать сайт самостоятельно, вернее с помощью бесплатного конструктора сайтов. Признаюсь – в создании сайтов я полный ноль, потому мне было интересен этот эксперимент. Сайт приюта хотела создать давно, но все присматривалась да прислушивалась. Очень хотелось сделать его своими руками. Почитав отзывы да информацию в Интернете, выбрала вышеуказанный конструктор. А о том, что он из себя представляет и каков был результат моей работы – читайте дальше. Может быть мой рассказ кого-то вдохновит на создание сайта, а кому-то поможет найти ответы на возникающие вопросы.

Вот так выглядит конструктор:

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

В результате открывается панель конструктора сайтов.

Для проверки выбрала первый попавшийся шаблон. Он выглядит очень красиво. Однако, тут меня ждало разочарование. Оказывается, это только онлайн демо-версия. А значит, все что я сделаю с шаблоном, будет удалено через 24 часа. Об этом написано внизу страницы – на зеленом фоне.

Это меня совсем не устраивало. И я решила действовать по-другому.

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

После этого следует заказать хостинг ISPmanager. Кстати, чтобы попробовать работу конструктора и хостинга, не обязательно его сразу же оплачивать. Сервис дает 14 дней для того, чтобы протестировать их. Если все понравилось – можно спокойно оплачивать и пользоваться благами цивилизации. Ну а если нет – то, как говорится, и суда нет. Немного отвлеклась. Возвращаюсь к рассказу о создании сайта.

В общем, зарегистрировалась я. На этом не буду останавливаться подробно. Регистрация простая – сами разберетесь, все взрослые люди.

Заказала хостинг и получила на электронный адрес письмо, в котором была ссылка, логин и пароль. По ней зашла в личный кабинет, ввела присланные данные. И все – я в панели ISPmanager хостинга. Здесь, в разделе WWW я нашла вкладку Конструктор сайтов.

Кликнула по на вкладке Конструктор сайтов. В соседнем окне открылась вкладка Конструктор сайтов.

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

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

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

Самое время приступать к выбору шаблона. Для этого просматриваю все предложенные, а их в конструкторе 211.

Среди предложенных шаблонов есть такие, с помощью которых можно создать:

· интернет-магазин (7 шаблонов);

· лендинг (11 шаблонов);

· информационный портал (7 шаблонов);

· персональную страницу (9 шаблонов);

· блог (4 шаблона).

Также есть возможность импортировать любой сайт.

Обратила внимание, что представлены и такие шаблоны, которые позволяют создать сайт:

· образовательного учреждения (11 шаблонов);

· туристического агентства или путешественника (9 шаблонов);

· с различными видами услуг (25 шаблонов);

· различных событий, в том числе свадеб (8 шаблонов).

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

В разделе Общество представлен шаблон Счастливые лапки. Думаю, он то мне и подойдет.

При наведении на шаблон всплывают кнопки: Выбрать, Просмотр и Руководство.

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

· Главная;

· О нас;

· Контакты.

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

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

На верхней серой панели есть кнопки:

· Главная – при наведении мышки появляется список страниц выбранного шаблона.

· Новый/ Сброс шаблона – при наведении мышки появляется список:

o Изменить шаблон;

o Сброс шаблона;

o Импорт.

· Круглые стрелки Отмена и Вернуть.

Чуть правее расположены иные возможности:

· выбор языка сайта;

· кнопка Просмотр;

· зеленая кнопка Опубликовать. При наведении мышки на нее, предлагается:

o Опубликовать;

o Сохранить черновик;

o Восстановить резервную.

Теперь все начинает понемногу проясняться. Перехожу к изменениям шаблона.

Начну со смены названия сайта Счастливые лапки и нажимаю на него. Справа, в Структуре страницы появился список изменений, которые я могу внести.

Здесь я могу настроить:

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

· размер надписи;

· отступы;

· видимость (на телефоне, планшете и т.д.);

· анимацию (по умолчанию или наведению);

· улучшенный вид.

Меняю название на Приют для животных ДРУГ. Сверху появилась панель, с помощью которой можно:

· выбрать шрифт;

· выделить жирным или курсивом;

· изменить цвет;

· выровнять слева, справа или на всю ширину;

· проставить списки (маркированные и нумерованные);

· поставить ссылку и т.д.

Когда все поправки внесены, нужно нажать Сделано.

Я тоже внесла кое-какие изменения в новом названии: выбрала другой шрифт, цвет.

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

Картинку можно:

· удалить;

· заменить;

· настроить прозрачность – я сделала прозрачной на 50%;

· написать сверху текст;

· настроить рамку;

· добавить или удалить ссылку на главную или нужную страницу;

· сделать так, чтобы она увеличивалась при клике;

· настроить размеры, отступы, видимость, анимацию, улучшенный.

При двойном клике на изображение появляется возможность изменить его. Это можно сделать:

· выбрав из галереи шаблонов или загрузив свое;

· добавив из бесплатной галереи;

· загрузив url нужного изображения;

· вставив иконку Font Awesome.

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

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

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

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

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

Данная панель позволяет добавлять в шаблон:

· границы;

· заголовки, подзаголовки, параграфы;

· фото и иконки;

· галереи и бизнес-девизы;

· видеопроигрыватель (в т. ч. YouTube, Instagram, Facebook, Vimeo) и аудопроигрыватель (в т. ч. включая Spotify;

· карты (Google, Яндекс, Bing);

· фигуры и элементы (Shapes, горизонтальные и вертикальные линии);

· различные варианты кнопок (с текстом и без него, иконок);

· формы связи (контакты);

· различные варианты меню (горизонтальные и вертикальные);

· панель переключения на другие языки, что позволит сделать сайт мультиязычным;

Я воспользовалась этой возможностью и добавила панель с четырьмя языками – русским, украинским, английским, немецким. Сразу добавила не все языки. Потому пропущенные добавляла в боковой панели справа. Так как сайт на русском языке – перед ним поставила звездочку;

· различные блоки (15 шт.), в том числе: О нас, Контакты, Отзывы, Блог;

· элементы электронной коммерции;

· блог;

· виджеты групп социальных сетей (Instagram, Facebook, ВКонтакте, Одноклассники, Spotify, Твиттер, Pinterest), а также кнопки Поделиться;

Я добавила и настроила кнопку Поделиться, выбрав интересные мне соцсети;

· другие улучшения (календари, баннеры, чаты).

Перехожу к средней круглой кнопкой, расположенной справа. Нажав на нее открылась панель:

· SEO – этот блок, необходимый для оптимизации сайта под поисковые системы. В нем следует внести метатеги, описания страниц, ключевые слова на тех языках, которые выбраны в панели мультиязычности. Это нужно сделать на всех страницах сайта. Это очень важный блок, потому я займусь им плотно после подбора ключевых слов;

· Фон – позволяет менять фон всех страниц;

· Стили – изменяет стилистику написания текста;

· Фавикон – это маленький значок, который будет отражаться в браузере вместе с названием сайта. Я его добавлю после регистрации домена;

· Настройка различных важных элементов. Это выполню после регистрации домена.

Перехожу к следующему этапу. Сменила надпись в шапке на Тебя ждет твой ДРУГ. Все остальное оставляю без изменений, т.к. мне нравится и призыв, и кнопка Приютить!

Просмотрела еще раз шаблон и мне он показался слишком растянутым. Изменила размер сверху и снизу. Получилось гораздо лучше.

Теперь дело за малым – изменить текст нижних блоков, добавив актуальную информацию о приюте. С помощью верхней и правой боковой панелей это сделать очень просто.

Итак, тексты добавила, черновик сохранила.

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

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

Чтобы приступить к изменениям, необходимо кликнуть Редактировать. Если страницу нужно удалить – нужно просто нажать Удалить. Всё очень просто!

Меняю название сайта. При нажатии на него, появилась панель. Выбираю Редактировать текст и переписываю название. После этого откорректировала тексты, добавила на страницу фон. Вот что получилось:

Сохранила черновик и перешла к редактированию страницы Контакты. Фон сохранился, осталось только внести правки в название сайта и текст на странице. Что я и сделала. Сохранила черновик. Вот результат:

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

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

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

Сайт готов к просмотру в браузере. Перейдя по ссылке http://201255.prohoster.biz/ я вижу результат. Это бесплатное доменное имя, сформированное хостером автоматически. Именно этот домен я выбирала, когда переходила в Конструктор сайтов. Вот что я увидела:

Результатом я осталась довольна. Теперь могу регистрировать домен и переводить готовый сайт на него.

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

Порадовал не только конечный результат, но и сам процесс работы с конструктором. Работать с ним просто благодаря интуитивно понятному интерфейсу. Разобраться в этом конструкторе сможет каждый, кто захочет. Я смогла – сможете и вы! Если не получится самостоятельно – воспользуйтесь моими комментариями.

Мой эксперимент создания сайта собственными руками удался. Путем проб и ошибок веб-ресурс был создан в короткие сроки и абсолютно бесплатно!

Удачи в освоении конструктора и реализации идей!