ГДЗ по информатике 11 класс учебник Семакин § 13. Инструменты для разработки web-сайтов
Веб-сайт — это набор взаимосвязанных веб-страниц, содержащих информацию, графику, мультимедийный контент и другие элементы, доступных через Интернет.
2. Какой язык используется для разработки сайтов?
Для разработки сайтов используются различные языки программирования, такие как HTML (HyperText Markup Language), CSS (Cascading Style Sheets), JavaScript, PHP (Hypertext Preprocessor) и многие другие. HTML — это основной язык, используемый для создания веб-страниц.
3. В чем преимущества визуальных НТМL-редакторов?
Преимущества визуальных HTML-редакторов:
• Визуальные HTML-редакторы позволяют создавать веб-страницы без необходимости знать язык HTML и другие языки веб-разработки, что делает их доступными для людей без технического образования или опыта веб-разработки.
• Визуальные HTML-редакторы обычно имеют интуитивно понятный интерфейс и функциональность перетаскивания и редактирования элементов страницы, что упрощает создание веб-страницы.
• Визуальные HTML-редакторы обычно поддерживают просмотр страницы в режиме реального времени, что позволяет увидеть, как будет выглядеть страница после публикации.
• Визуальные HTML-редакторы часто имеют встроенные инструменты для создания интерактивных элементов, таких как формы, кнопки, выпадающие списки и т.д.
4. В чем недостатки визуальных НТМL-редакторов?
Недостатки визуальных HTML-редакторов:
• Визуальные HTML-редакторы могут создавать неоптимизированный и медленный код, что может привести к медленной загрузке страницы.
• Визуальные HTML-редакторы не всегда создают код, соответствующий стандартам, что может привести к проблемам с отображением на разных браузерах и устройствах.
• Визуальные HTML-редакторы обычно не могут создавать сложный код, используемый для более продвинутых функций, таких как AJAX и JavaScript, поэтому в некоторых случаях может потребоваться использовать ручное программирование.
5. Какой из известных вам программных продуктов вы порекомендовали бы использовать для создания мощного wе b -проекта, над которым работает большое число людей?
6. В каких случаях удобнее использовать редакторы NVU или KompoZer?
Редакторы NVU или KompoZer удобнее использовать в следующих случаях:
• Для начинающих пользователей, которые не имеют опыта в веб-разработке и нуждаются в простом и интуитивно понятном интерфейсе для создания веб-страниц.
• Для создания простых веб-страниц, которые не требуют сложной функциональности или интеграции с другими приложениями.
• Для создания веб-страниц, которые должны быть опубликованы на сайте со статическим содержимым без необходимости дополнительной обработки или программирования.
В чем недостатки визуальных html редакторов
Урок 27. Web-сайт – гиперструктура данных. Инструментальные средства создания Web-сайтов
Инструменты для разработки wеb-сайтов (§ 13)
Вернемся к разговору о web-сайтах и узнаем, с помощью каких средств можно самостоятельно создать сайт.
Web-сайт — это совокупность гипертекстовых документов, которые рассматриваются как единое целое и определяются одним URL-адресом.
Содержимое web-сайта может включать в себя все доступные в настоящее время типы информации, а также интерактивные средства для ведения диалога с пользователем (форумы, гостевые книги, формы обратной связи и т. д.). Помимо этого, каждый сайт может иметь индивидуальный дизайн (хотя следует заметить, что часть сайтов создается с применением готовых шаблонов).
Понятие языка разметки гипертекста
В предыдущем параграфе уже говорилось о том, что основой любого сайта является язык разметки гипертекста HTML (HyperText Markup Language). HTML включает в себя несколько десятков так называемых тегов (команд), каждый из которых определяет внешний вид отдельного элемента страницы: текста, изображения, таблицы, списка и др. Например, следующая запись в HTML-документе:
Moя домашняя страница
означает, что указанный текст («Моя домашняя страница») должен отображаться в окне браузера шрифтом Arial, цвет шрифта — красный.
Визуальные HTML-редакторы
Для создания сайта необязательно знать язык HTML. Существует множество доступных визуальных HTML-редакторов, их другое название — WYSIWYG-редакторы, позволяющих создавать сайты без знания данного языка. WYSIWYG расшифровывается как: What You See Is What You Get — что видишь, то и получаешь. Работа в таких редакторах происходит с визуальными формами, а не с тегами. Например, чтобы сделать шрифт текста жирным, надо просто выделить этот текст и нажать соответствующую кнопку в меню редактора. После этого редактор вставит в HTML-код необходимые теги, а разработчик сайта увидит на странице уже итоговый результат.
Визуальный HTML редактор (WYSIWYG-редактор) — прикладная программа, в которой содержимое web-страницы строится из визуальных форм и в процессе редактирования автоматически формируется HTML-код страницы, текущий вид которой сразу отображается на экране.
Правда, у визуальных редакторов есть ряд недостатков. В частности, сгенерированный ими HTML-код далеко не всегда бывает оптимальным, т. е. размер файла может получиться гораздо больше, чем при его непосредственном описании на языке HTML. Кроме того, в этих редакторах есть масса настроек, которые несведущему человеку будут просто непонятны. Например, человек, впервые создающий сайт, может не знать, что такое «якорь» ссылки или «альтернативный текст» изображения. Поэтому хоть какие-то минимальные сведения об используемых терминах необходимо предварительно получить.
Существует достаточно много программных продуктов, позволяющих в визуальном режиме создавать макет сайта и заполнять его содержимым. Кратко опишем наиболее распространенные.
1. Adobe Dreamweaver — один из наиболее популярных коммерческих программных продуктов, предназначенных для разработки сайтов. Изначально был разработан и поддерживался компанией Macromedia (до 2005 г.). Следующие версии, начиная с Dreamweaver CS3 (2007 г.), выпускает компания Adobe. Редактор содержит огромный выбор всевозможных инструментов, удобный интерфейс, тонкие настройки, позволяющие подогнать программу под нужды web-мастера, а также встроенный FTP-менеджер для загрузки файлов на сервер.
Начинающий пользователь может создавать страницы практически без знания HTML — добавляя элементы страницы и указывая их параметры с помощью встроенного мастера (рис. 2.7).
2. Microsoft Office SharePoint Designer 2007 — визуальный HTML-редактор и программа для web-дизайна от компании Microsoft (рис. 2.8). Является одним из компонентов пакета Microsoft Office 2007, но при этом требует отдельной установки. Данный пакет относится к числу достаточно сложных редакторов, позволяющих создавать не только простейшие web-страницы, но и полноценные web-узлы, предназначенные для коллективной работы пользователей. Более новая версия программы Microsoft Office SharePoint Designer 2010 максимально завязана на совместную работу большого числа людей над одним проектом, что требует установки соответствующего программного обеспечения на сервере, где хранится данный проект.
Изначально этот продукт относился к разряду коммерческих, но с 2009 года стал распространяться бесплатно для всех желающих на официальном сайте Microsoft Office:
3. WebPageMaker — простой, быстрый и удобный редактор для создания сайтов. Пользователь с помощью мышки перетаскивает в необходимые места на странице заранее заготовленные тексты и графику. В состав программы входит большое количество готовых шаблонов, которые можно использовать как основу для будущего сайта.
Встроенный FTP-менеджер позволяет быстро загрузить готовый сайт на сервер. Сайты, сделанные в WebPageMaker-3.0.3, одинаково корректно отображаются во всех основных типах браузеров.
К одному из существенных достоинств редактора относится очень небольшой объем дистрибутива (всего 3,5 Мбайт). Кроме того, существует так называемая версия portable, которая не требует установки (ее объем — 6 Мбайт).
4. Nvu — свободно распространяемый визуальный HTML-peдактор. Преимущество редактора Nvu состоит в его кроссплатформенности: есть версии под Linux, Microsoft Windows и MacOS.
Помимо типовых для web-редакторов функций, Nvu содержит интегрированный FTP-менеджер, мощную поддержку для форм, таблиц и шаблонов. Редактор очень прост в использовании. В последние несколько лет Nvu не развивается, но потенциал этого редактора продолжает реализовываться в редакторе KompoZer.
5. KompoZer (рис. 2.9) — ответвление от редактора Nvu. KompoZer является свободно распространяемой web-авторской системой, которая сочетает в себе менеджер для web-файлов и визуальный редактор. По сравнению с Nvu, KompoZer создает более короткий код разметки. KompoZer чрезвычайно прост в использовании, что делает его привлекательным для пользователей, которые хотят создавать сайты без получения серьезных технических знаний. KompoZer может рассматриваться в качестве редактора для создания небольших web-проектов. Объем дистрибутива — 7 Мбайт.
Вопросы и задания
1. Что такое web-сайт?
2. Какой язык используется для разработки сайтов?
3. В чем преимущества визуальных HTML-редакторов?
4. В чем недостатки визуальных HTML-редакторов?
5. Какой из известных вам программных продуктов вы порекомендовали бы использовать для создания мощного web-проекта, над которым работает большое число людей?
6. В каких случаях удобнее использовать редакторы NVU или KompoZer?
Инструменты для разработки веб-сайтов
В данный момент вы не можете посмотреть или раздать видеоурок ученикам
Чтобы получить доступ к этому и другим видеоурокам комплекта, вам нужно добавить его в личный кабинет.
Получите невероятные возможности
Конспект урока «Инструменты для разработки веб-сайтов»
На прошлых уроках мы узнали о том, что интернет, это не только глобальная компьютерная сеть, а так же и глобальная информационная система, которая обеспечивает пользователям возможности доступа к информации и общения между собой.
Возможности, предоставляемые интернетом, представлены его службами, которые можно условно разделить на информационные и коммуникационные.
Важнейшей информационной службой интернета является всемирная паутина. Это система веб-страниц, которые связаны между собой гиперссылками. Текст, который содержит гиперссылки, называется гипертекстом.
Всемирная паутина работает по системе клиент-сервер. Веб-сервер и компьютер-клиент взаимодействуют между собой по протоколу HTTP. Клиент отправляет на веб-сервер запрос на веб-страницу, а сервер в ответ отсылает указанную веб-страницу или сообщение об ошибке, если она недоступна.
Большая часть веб-страниц содержаться в составе веб-сайтов. Веб-сайт – это система связанных между собой веб-страниц, принадлежащих одной организации или лицу.
Наверняка, посещая различные сайты всемирной паутины, вы задавались вопросом «а как и при помощи чего они создаются?».
Сегодня мы рассмотрим различные инструменты создания веб-сайтов. Мы рассмотрим язык разметки гипертекста, и визуальные HTML-редакторы, а также прикладные технологии, которые могут применяться при создании современных сайтов.
Допустим, вы решили создать свой сайт. Вы выбрали тему и подобрали материал. Теперь необходимо выбрать технологии, которыми вы будете пользоваться для его реализации. Рассмотрим возможные варианты.
Независимо от того при помощи какой технологии создаётся веб-сайт, все его веб-страницы будут содержать разметку, написанную на языке разметки гипертекста, что в переводе на английский язык означает «HyperText Markup Langyage» или сокращённо «HTML». Веб-сайт состоит из блоков, размеры и оформление которых записываются при помощи этого языка. Его основу составляют теги, специальные записи в угловых скобках. Их можно разделить на парные и одиночные. Парные теги состоят из открывающегося и закрывающегося тегов. Закрывающиеся теги начинаются со знака слеш. Так, например, абзац текста заключается между тегами «p» и /р». Для одиночных же закрывающийся тег не нужен.
Ещё одной важной составляющей языка разметки гипертекста являются атрибуты. Это параметры тегов. Говоря простым языком, каждый тег – это блок, который оформлен определённым образом. А атрибуты – это дополнительные указания к оформлению этих блоков. Они записываются в угловых скобках того тега, к которому относятся. Так, например, одиночный тег, для вставки изображения «img» может содержать атрибуты «src», в котором указывается местоположение файла-источника изображения, а так же «height» и «width», в которых содержаться длина и ширина, в пикселях, для вставленного изображения.
Рассмотрим структуру простейшего HTML-документа. Вначале записывается тег «DOCTYPE html», который сообщает браузеру, что он работает именно, с документом, который написан на языке разметки гипертекста. Содержимое веб-страницы записывается между тегами «HTML» и «/HTML». Все данные о веб-странице можно разделить на две части: заголовок, который размечается тегами «head» и «/head» и тело, которое размечается тегами «body» и «Слеш body». Заголовок документа может содержать текст заголовка, информацию о стилях оформления веб-страницы, а также мета данные. Текст заголовка записывается между тегами «title» и «/title». Тело веб-страницы содержит информацию, которая размещается на веб-странице, а также данные по её разметке, в виде тегов.
При помощи тегов языка разметки гипертекста мы можем сколь угодно детально оформлять веб-страницы, просто записывая теги в блокноте или другом текстовом редакторе. Но главный недостаток такого способа создания сайта состоит в том, что для того чтобы наиболее эффективно применять HTML, нужно знать как можно больше тегов.
Для того чтобы облегчить работу по созданию сайтов появились дополнительные инструменты, HTML-редакторы. Их можно разделить на редакторы исходного кода, а также визуальные HTML-редакторы.
Редакторы исходного кода облегчают его написание при помощи дополнительной функциональности по сравнению с блокнотом. Например, они могут проверять его правильность. Так же они предлагают для использования некоторые шаблоны кода. Они могут использоваться не только для написания HTML-кода. Наиболее распространённые редакторы исходного кода для виндовс: «NotePad++» и «PSPad».
Визуальные HTML-редакторы ещё их называют «Визивиг-редакторами». Это название они получили по первым буквам принципа их работы. «What You See Is What You Get», что в переводе на русский язык означает «Что видишь – то и получаешь». В этом и состоит их главное преимущество. Оформляя веб-страницы с их помощью, человек видит не систему тегов, а блоки-веб-страницы в том, виде в котором их увидит пользователь. Можно сразу оценить сочетания цветов или размеры блоков.
При работе с блоками визуальный HTML-редактор автоматически генерирует код на языке разметки гипертекста, который позволяет получить эти блоки.
Недостаток большинства визуальных редакторов состоит в том, что они генерирует код на HTML не самым рациональным образом. Это означает что веб-страницы, которые оформлены с их помощью будут занимать больше дискового пространства на веб-сервере, а также для загрузки таких страниц на стороне клиента будет требоваться больше времени. Так же визуальное редакторы могут иметь большое количество настроек, и чтобы понять принципы работы каждой из них может уйти много времени.
Существует множество визуальных HTML редакторов различной сложности. Рассмотрим наиболее распространённые из них. Начнём с визуального редактора «Adobe DreamWeaver». Это одна из самых распространённых коммерческих программ для веб-дизайна. «Adobe DreamWeaver» предоставляет большой выбор инструментов, а также достаточно тонкие настройки для опытных веб-дизайнеров. В то же время начинающий пользователь может создавать веб-страницы с помощью этого редактора практически без знаний языка разметки гипертекста. В этом ему может помочь встроенный мастер настройки элементов веб-страницы. В нем достаточно выбрать нужный элемент из доступных, а затем настроить его основные параметры.
Визуальный редактор «Microsoft SharePoint Designer», изначально был коммерческим проектом, но теперь доступен для свободного скачивания на официальном сайте корпорации Майкрософт. Данная программа считается достаточно сложным визуальным редактором, рассчитанным на опытных пользователей. С его помощью можно создавать не только простые веб-страницы, а также большие веб-узлы, которые предназначены для совместной работы большого числа пользователей.
Простым и быстрым коммерческим визуальным HTML-редактором является программа «Web Page Maker». Чтобы разместить, элемент на веб-странице пользователю достаточно выбрать его в списке готовых и при помощи мыши перетащить на нужное место. В составе программы есть большое количество готовых шаблонов, которые можно использовать как основу для новых сайтов. Так же в данной программе имеется встроенный FTP-менеджер, который позволяет быстро загружать готовые сайты на веб-сервер. Сайты, которые созданы с помощью это программы, одинаково правильно отображаются на всех популярных браузерах. К преимуществам этой программы можно отнести её малый размер. Установочные файлы занимают всего три с половиной мегабайта дискового пространства.
Визуальный HTML-редактор «Nvu» с открытым исходным кодом изначально задумывался как бесплатная альтернатива редакторам «Adobe DreamWeaver» и «Microsoft SharePoint Designer». Однако намеченного уровня функциональности он так и не достиг. В две тысячи шестом году его поддержка была прекращена. Его главным преимуществом является кроссплатформенность. Данный редактор прост в применении. Он имеет большое количество встроенных шаблонов, а также встроенный FTP-менеджер.
В две тысячи шестом году на основе открытого кода редактора «Nvu» был выпущен бесплатный HTML-редактор «Kompozer». В две тысячи седьмом году он был объявлен лучшей бесплатной альтернативой «Adobe DreamWeaver» по версии сайта «Download.com». По сравнению с «Nvu», «Kompozer» генерирует код на языке разметки гипертекста более рационально. Он очень прост в использовании, но при этом имеет достаточную функциональность для разработки небольших веб-проектов.
Несмотря на развитие языка разметки гипертекста, в две тысячи четырнадцатом году была выпущена его пятая версия, не только он используется при создании современных веб-сайтов. Кратко рассмотрим другие технологии, применение которых, вместе с языком разметки гипертекста, так же достаточно распространено.
· Каскадные таблицы стилей или «CSS». Это мощный инструмент для оформления блоков гипертекста. Они позволяют вынести все описание оформления в отдельные файлы, что позволяет не загромождать код страницы на языке разметки гипертекста.
· Для того чтобы сделать содержимое страниц динамичным и сделать возможным добавление различной движущейся анимации, используются сценарные языки программирования, на пример «JavaScript».
· Для хранения различных данных и быстрого доступа к ним используются различные базы данных. Основной системой управления базами данных для веб-сайтов является «MySQL».
· Для того чтобы реализовать логику работы различных инструментов веб-страницы, а так же совместить все эти технологии используются различные языки программирования. Самым популярным языком программирования для разработки веб-страниц является «php».
Сегодня мы рассмотрели различные инструменты и технологии создания веб-сайтов. Веб-сайт – это система веб-страниц, которые рассматриваются как одно целое. Основной инструмент разработки веб-страниц – язык разметки гипертекста HTML. HTML-редакторы используют для того, чтобы облегчить процесс создания веб-страниц. Их можно разделить на редакторы исходного кода и визуальные редакторы. Редакторы исходного кода облегчают его написание с помощью дополнительной функциональности, например, проверки корректности. Визуальные редакторы автоматически генерируют код на языке разметки гипертекста, для элементов веб-страницы, заданных пользователем.
WYSIWYG-редакторы — что это и как их использовать
То, что вы видите в браузере, и то, что воспринимает сам браузер, здорово отличается между собой. Браузер понимает только язык HTML, с помощью которого создаются веб-страницы.
WYSIWYG («визивиг») — сокращение английских слов «что видишь, то получаешь» — это визуальный редактор, форма работы прикладного ПО или веб-интерфейса, в котором работа происходит в виде конечного редактирования.
Для качественной подмены фингерпринтов пользуйтесь антидетект-браузером, который выбирают ТОП команды.
Dolphin
WYSIWYG-редакторы используют фреймы со свойством designMode в состоянии «On», что поддерживает страницу в постоянном режиме редактирования. В момент сохранения изменений через свойство innerHTML забирается HTML-код из фрейма, который отправляется на сервер и там сохраняется.
Посмотрите, как в CMS MODx Revo текст редактируется в WYSIWYG-редакторе TinyMCE, который выглядит так:
А на сайте контент отображается таким образом (подключается шапка, футер и другие элементы оформления):
Работа с контентом сайта основана на простом пользовательском интерфейсе. Так любой человек без знаний HTML может менять страницу. И разобраться с визивиг-редактором может даже школьник.
Вот его основные инструменты:
Любая веб-страница создается на языке разметки гипертекста HTML. Например, на сайте из нашего примера страница для поискового робота и браузеров выглядит таким образом:
Поэтому в каждом редакторе предусмотрена работа с кодами HTML. WYSIWYG-редакторов ругают профессиональные программисты и верстальщики, так как они оставляют «грязный» код с лишними тегами и т.п. В этом разделе можно очистить HTML от лишнего «мусора».
Тем и удобен WYSIWYG editor, что он позволяет вносить изменения в контент при помощи простых инструментов без знания HTML и сразу же видеть эти изменения так, как они будут отображаться на сайте.
К тому же, современные WYSIWYG-редакторы стали лучше. Многие из них создают «чистый» код.
WYSIWYG-редакторы — только для работы контент-менеджера?
На самом деле редакторы с функционалом WYSIWYG нужны не только для облегчения работы контент-менеджера. Рассмотрим, какие их виды пользуются популярностью у веб-разработчиков.
Таблица 1. WYSIWYG-редакторы и их виды
| Вид редактора | Примеры | Функционал |
| Для разработки сайтов и html-страниц. | Website Builder, MS Frontpage, Macromedia Dreamweaver, MS Sharepoint Designer. | Работают онлайн или устанавливаются на ПК. Помогают создать «основу» сайтов и html-страниц, облегчают и ускоряют их верстку. |
| Для работы с содержимым сайта. | NicEdit, TinyMCE, CKeditor. | Приходят на помощь контент-менеджеру. Интегрируются в CMS. |
ТОП 7 бесплатных WYSIWYG редакторов для работы с содержимым сайта
NicEdit
Это альтернатива сложным визуальным редакторам, которая легко интегрируется в CMS.
Объемный, несколько сложен для изучения.
TinyMCE
Пример работы TinyMCE вы видели выше, когда мы рассказывали о работе в CMS MODx. Имеет открытый исходный код, но опция API сложна в ознакомлении. Написан на JavaScript. Легко интегрируется в сайт и настраивается. Считается «полным» редактором с широким функционалом, генерирует чистый код.
Его недостаток — кнопки размещены в одной области, не структурированы. Отсутствуют горячие клавиши. Файловый менеджер устанавливается вручную. Возможна работа с плагинами.
Не рекомендуется копировать из Word текст и вставлять его в редактор без последующей обработки — может появиться мусорный код, который редактор автоматически не распознает и не удаляет.
CKEditor
Это обновленный FCKEditor с исправленными багами, который ранее считался лидером среди визуальных редакторов. Обладает мощным функционалом, сравнимым с MSWord и Open Office.
Реализована работа с API, можно настроить горячие клавиши. Файловый менеджер скачивается и легко устанавливается.
YUI Rich Text Editor
Визуальный редактор для сайтов от компании Yahoo, поставляется в нескольких версиях, отличается хорошей эргономикой (нет лишних кнопок).
Предлагается несколько версий визуального редактора, различающихся по функционалу. Простое редактирование контента есть в любой версии.
MarkItUp!
JQuery-плагин, который поддерживает синтаксис HTML, BBcode, Wiki. Не является общепринятым WYSIWYG-редактором, но предлагает его функции. Простой в работе и очень компактный.
Из преимуществ плагина можно выделить компактность и простоту.
WYMeditor
Русскоязычная аудитория о WYMeditor знает мало. К тому же, обрабатывать большие тексты в нем не очень удобно. Предусмотрен базовый функционал — оформление текста, изображений, ссылок. Есть хорошая визуальная составляющая, выдается чистый код всего в одной строке, что сокращает вес конечного HTML-кода. Предусмотрена поддержка API, плагинов.
Из недостатков стоит отметить, что нет работы с таблицами, а также файлового менеджера. Визуально отображается весь длинный текст на экране («простыня»), а не та его часть, с которой работает контент-менеджер.
OpenWysiwyg
Кросс-браузерный визуальный редактор, который работает онлайн. Не нужно его скачивать на ПК. Отличается удобным структурированным интерфейсом, есть всплывающие элементы, поэтому функционал не занимает много места на экране.
Прекрасно умеет работать с огромными таблицами. Минус — в Google Chrome не работает и в CMS не интегрируется.
Платные и бесплатные редакторы для разработки сайтов и html-страниц
Если бесплатный визуальный редактор в большинстве случаев предназначается для работы с содержимым сайта и встраивается в CMS, то платные WYSIWYG editors помогают html-кодерам и программистам создавать веб-проекты.
Бесплатные варианты ПО такого типа имеют ограниченный функционал, но подходят для начинающих верстальщиков.
Таблица 2. Бесплатные редакторы для создания сайтов (без интеграции с CMS)
| Название | Достоинства | Недостатки | Особености |
| TurboSite | Простота | Ограничения по визуальному редактированию. | |
| KompoZer | Встроенный файловый менеджер. | Редко обновляется.Отсутствуют HTML5 и CSS3. | |
| Filyanin | Работать быстро и просто. | Подходит для работы с небольшими текстами. | Редактор онлайн на одноименном сайте — скачивать его не нужно, он всегда под рукой. |
| MS Office SharePoint Designer | Используется CSS. | Устанавливается отдельно от MS Office.Неудобная официальная справка к ПО. | Замена Microsoft Office FrontPage. |
| Amaya | Открытый исходный код. | Нет HTML5.Не обновляется с 2012 года. |
Рассмотрим несколько известных редакторов для профессионального создания веб-страниц, за использование которых придется заплатить.
Это различные экономичные по стоимости редакторы в режиме WYSIWYG, созданные компанией Kors. Стоимость использования — всего от 700 рублей в год. Есть бесплатная версия «Мини-сайт».
Все программные продукты отличаются интуитивно понятным интерфейсом, не требуют знаний HTML, могут работать без подключения к интернету. Встроен функционал для создания каталогов, режим перетаскивания блоков, сжатие изображений без потери качества и т.д.
Можно работать с HTML-кодом напрямую. Редактирование страницы и ее выгрузка на сайт по FTP максимально упрощены.
Adobe Dreamweaver
Adobe Dreamweaver CS4 на русском языке — это замена Macromedia Dreamweaver 8, Adobe GoLive CS2, Adobe Dreamweaver CS3, Macromedia HomeSite 5, которые в настоящее время уже не продаются.
Цена на программный продукт — около 15 000 рублей.
Это большая и сложная программа, в интерфейсе которой есть все для создания HTML-страниц: строка меню, панели стилей, вставок, документов, инструментов, создания кода, а также инспектор свойств и селектор тегов.
Надстройки стилей, файловый менеджер, базы данных, привязки, компоненты, файлы, фрагменты кода, история и другие дополнительные инструменты скрыты в «Доке панелей», но могут быть вызваны по мере необходимости.
Также привязаны расширения Adobe Bridge, Fireworks, Flash и другие. Весь функционал управляется приложением Extension Manager.
Обеспечивает поиск, просмотр, фильтрацию и сортировку, обработку изображений, макетов страниц, документов PDF и мультимедийных файлов.
В программе предусмотрены три режима: работа с кодом HTML, дизайн (визуальное отображение) и просмотр. Также окно можно разделить на два (как в нашем примере): дизайн и код.
Использовать «Дримку» в качестве HTML-редактора для ежедневной работы с контентом сайта нецелесообразно. Ее назначение — создание сайтов. Поэтому контент-менеджер использует лишь малую часть предложенных разработчиком функций.
Но несмотря на перегруженность функционалом полезно держать Dreamweaver под рукой — редактор действительно сможет абсолютно все. Если другой программный продукт не справляется с поставленной задачей — вы откроете Dreamweaver и сделаете все, что хотите. А затем отложите его в сторону, чтобы пользоваться чем-то менее громоздким.
Web Page Maker
Цена — 49$. Дается 15 дней на бесплатное знакомство с программным продуктом.
ПО простое, поставляется на английском языке, но есть вариант с русским интерфейсом.
Знание HTML не требуется. Работа происходит исключительно с мышкой — для будущего текста намечаются поля, оформляются заголовки, шрифты, картинки, и все вставляется в отмеченное текстовое поле. Общепринятых мастеров настроек нет.
Можно создать страницу на предлагаемом шаблоне или самостоятельно. Предусмотрено использование CSS, Java, ссылок, таблиц, рисунков, Flash, Media, фреймов, форм.
WebSite X5
Версии программы периодически обновляются, поэтому цена — величина непостоянная (от 4 000 руб.). Ранее бесплатная версия Free служила для предварительного знакомства с ПО и отличалась строгими ограничениями.
Главный принцип этого ПО — применяется пошаговая разработка сайта. Основной режим — визуальный с использованием шаблонов, которые идут в комплекте (их более 500 штук). Но можно создавать свои шаблоны с использованием графических элементов и приложений.
В последних версиях есть возможность создания интернет-магазинов, блогов, RSS, адаптивных сайтов.
Работает с текстами, изображениями, ссылками, таблицами, Flash, аудио и видео, фотогалереями, форумами, поиском на сайте и др. Есть удобная функция перетаскивания элементов при помощи мыши.
Создает элементы на основе табличной верстки (устаревший метод организации HTML-страниц). Но после публикации сайта табличный код преобразуется в современный блоковый (на адаптивном DIV).
Продвинутые пользователи смогут подключать оплату кредитными картами, использовать разные версии языков, защищать страницы паролями и др. Созданный сайт публикуется на сервере посредством встроенного FTP.
WebSite X5 отличается широким функционалом, быстро работает, вы найдете много обучающего материала в интернете.
WebsitePainter
Цена — 39$. Русифицированный визуальный редактор. Простой, быстрый, без лишних элементов, функциональный, помогает создавать страницы любой сложности.
Из недостатков можно назвать отсутствие линейки для выравнивания объектов и их группировки, скудный набор шаблонов. Готовых блогов, RSS, гостевых книг, интернет-магазинов в шаблонах нет, но возможность работы с кодом значительно расширяет функционал.
Сайт создается в виде одного файла *.wsp. Он публикуется сразу на сервер посредством встроенной программы, при этом создается необходимый комплект из нескольких файлов.
Полезные советы
- Перед размещением в редакторе хорошо форматируйте текст. Используйте заголовки разных уровней, списки, выравнивание картинки относительно текста.
- Если вы вставляете контент из MS Word — смотрите код и очищайте его от мусора. В отдельных редакторах предусмотрена очистка форматирования или специальная вставка из Word.
- Используйте CSS-стили. Для уменьшения веса кода не стоит выбирать синий цвет для жирного текста или зеленый для заголовка в самом редакторе. Воспользуйтесь таблицей стилей.
- Не применяйте подчеркивание слов. Люди будут думать, что это ссылки.
- Вставляйте ссылки с URL от корня сайта — например, не http://www.вашдомен//3747234/ssilka.html, а /3747234/ssilka.html.
- Перед вставкой каждое изображение заранее обрабатывайте в графическом редакторе, придавая ему необходимый размер и требующийся формат.
- Какие форматы картинок можно использовать:
- JPEG — для фото и изображений с широкой цветовой гаммой;
- GIF — для чертежей, схем;
- PNG — для сжатия без потери качества или для картинок на прозрачном фоне.
Выводы
Многие веб-разработчики неохотно пользуются WYSIWYG-редакторами, в то время как интегрированные в CMS, они намного облегчают работу контент-менеджеров.
Причина нелюбви разработчиков в том, что некоторые браузеры интерпретируют ключевые стандарты web по-разному. Например, CSS считается стандартным языком стилей, а IE до сих пор поддерживает не все его функции. Также при генерации HTML-кода ПО добавляет в него много лишнего, и мусор приходится убирать вручную. Поэтому кодеры отказываются от визуального редактора и пишут код в простом текстовом.
При использовании WYSIWYG разработчик не видит код полностью. Поэтому при работе с ним рекомендуется одновременно открывать два окна (редактор + сайт) и следить за изменениями онлайн.
Поэтому для профессиональной разработки сайтов мы рекомендуем пользоваться профессиональными платными визуальными редакторами типа Dreamweaver, а в CMS интегрировать бесплатное ПО, которое облегчит работу с контентом и выдаст чистый программный код, например, TinyMCE.
Несомненно, встроенные в CMS редакторы облегчают работу человека, который занимается размещением материалов на сайте. Но для копирайтеров они бесполезны. Такие программные продукты не выявляют ошибки, не предлагают альтернативы (синонимы) к словам, не дают возможности в подсчете символов.
Русифицированные есть, как платные, так и бесплатные.
Установленный бесплатный плагин значительно расширит возможности встроенного редактора WordPress, поэтому мы настоятельно рекомендуем его установить.