§10. Визуальное веб-конструирование

Визуальный метод позволяет автоматизировать процесс конструирования веб-сайтов. Этот метод возник из необходимости уменьшить трудоемкость и время создания сайтов.

Суть метода отражена в принципе WYSIWYG (от англ. What you see is what you get — «Что видишь, то и получишь»). При создании сайтов с использованием визуального метода необходимо выбрать инструменты: редакторы визуального конструирования, или онлайн-конструкторы сайтов. В § 6 упоминались некоторые из них. Использование редакторов обеспечивают пользователю возможность работать без непосредственного подключения к Интернету (пример 10.1).

В дальнейшем сайт можно разместить в Интернете. При использовании редакторов для создания веб-сайтов html-код генерируется в соответствии с визуальным представлением веб-страницы.

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

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

Некоторые конструкторы сайтов предлагают комплексные решения для построения сайтов различной направленности «под ключ», при этом не требуется устанавливать никакое программное обеспечение, нужен только доступ в Интернет (пример 10.2).

Преимущества конструкторов сайтов:

  1. Цена. При использовании некоторых конструкторов можно создать сайт бесплатно, а потом загрузить его в Интернет на хостинг.
  2. Скорость создания. Сайт можно создать за несколько часов.
  3. Скорость работы. Сайты уже оптимизированы под площадки, на которых они находятся, и будут быстро работать.
  4. Отсутствие программирования. Для создания сайта не нужно знать ни языков веб-программирования, ни языков разметки.
  5. Готовая структура сайта. При создании сайта предоставляется уже готовая структура с примерами.

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

 

 Пример 10.1. Визуальный вебредактор Adobe Dreamweaver.

С возможностями этого редактора можно познакомиться, перейдя по ссылке:

https://www.adobe.com/products/dreamweaver.html

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

Пример 10.2. Конструкторы сайтов.

1. Wix — https://ru.wix.com/

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

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

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

2. Ukit — https://ukit.com/ru

Пример 10.2. Продолжение.

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

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

Пробный период составляет 14 дней.

 
1. Что представляет собой метод визуального веб-конструирования?
2. Какие инструменты создания сайтов используются при визуальном методе веб-конструирования?
3. Какими преимуществами обладают конструкторы сайтов?

Упражнения

1. Зарегистрируйтесь на сайте http://ukit.com или https://ru.wix.com/ и подтвердите регистрацию через ссылку в электронном письме.

2. Используя предварительный просмотр, рассмотрите предлагаемые шаблоны. Выберите шаблон для будущего сайта из категории «Универсальные».

3. Введите доменное имя сайта, изменив username (например, birds).

4. На основе выбранного шаблона создайте сайт следующей структуры:

3. Поменяйте порядок страниц (если необходимо, страницы можно перетаскивать).
4. Поменяйте названия страниц в меню (для открытия панели Меню просто выделите меню на странице).
5. В шапке сайта разместите логотип с иконкой, соответствующей тематике сайта. Для замены иконки выполните перечисленные действия.

5.1. Выполните щелчок по имеющейся в шаблоне иконке.
5.2. Нажмите Заменить.
5.3. В окне Библиотека щелкните по под-ходящей иконке.
5.4. Настройте цвет и размер иконки.

6. В нижний колонтитул сайта добавьте персональные данные (фамилию, имя, класс).
7. Измените содержание страниц в соответствии с тематикой сайта (блоки можно удалять/добавлять, размещать в них свой текст, рисунки и другие объекты). Материалы для оформления страниц можно взять с сайта http://e-vedy.adu.by.
8. На странице «О птицах» разместите:

1. Заголовок 1 <Название страницы>.
2. Текст о птицах.
3. Слайдер <Фото птиц>.

9. На страницах «Воробьиные» и «Дятлообразные» разместите:

1. Заголовок 1 <Название страницы>.
2. Контент <Название, фото и описание птицы> — в 3 экземплярах.

10. Найдите в Интернете информацию для страницы «Гусеобразные». Оформите ее аналогично страницам «Воробьинообразные» и «Дятлообразные».
11. Страницу «Главная» оформите самостоятельно (продумайте содержание и дизайн).

 

Проверь себя