Существует множество способов создания собственного сайта - от использования готовых шаблонов на Narod.ru до обращения по объявлению типа "создание сайтов за два дня от 300 рублей". Создать свой собственный блог или простенькую домашнюю страницу может даже ребенок. Именно поэтому похвастаться наличием своего сайта в Сети может почти каждый. Различные сервисы предоставляют в распоряжение любого желающего сайты-конструкторы, которые за считанные секунды создают простенькую личную страницу пользователя. Таких страниц в Интернете сотни и сотни тысяч. Как правило, они похожи друг на друга и не запоминаются. Для тех, кто использует бесплатные онлайновые инструменты для создания личной интернет-страницы, собственный сайт - чаще всего забава, люди создают страничку и забывают про нее. Содержание на ней в большинстве случаев сводится к публикации фотографий своей собаки и нескольких сведений "о себе".
Другое дело, если собственный сайт воспринимается человеком как способ коммуникации, такой, как телефон или почта. Иметь свой сайт полезно для любого предпринимателя, желающего представить свой бизнес, практикующего врача, юриста, открывающего свою консультацию, учебного центра и т.д. В этом случае страница должна быть оригинальной и содержательной, нести полезную информацию для посетителей. Чтобы получить сайт, соответствующий этим требованиям, одними бесплатными генераторами домашних страничек не обойтись. Однако на освоение азов web-программирования может уйти много времени. Можно, конечно, нанять профессионала, который сделает любую страницу согласно вашим желаниям, однако этот вариант имеет вполне очевидный недостаток, поэтому для многих он неприемлем.
Визуальные web-редакторы - хороший способ сэкономить время на изучении web-программирования и быстро сделать сайт, наполнив его всей необходимой информацией. С одной стороны, для создания web-проекта с помощью подобной программы не нужно иметь специальных знаний и быть программистом. С другой стороны, приложения такого типа дают простор для творчества и гарантируют, что сайт не будет выглядеть точно так же, как тысячи других. В основе работы визуальных web-редакторов лежит свойство WYSIWYG - What You See Is What You Get (что видишь, то и получишь). Иными словами, в процессе редактирования web-страницы выглядят примерно так же, как будут отображаться в браузере.
Web-страницы, создаваемые при помощи WYSIWYG Web Builder и других визуальных редакторов, состоят из отдельных блоков. Это может быть текст, графика, флеш-ролики и т.д. Все, что нужно сделать пользователю, - выбрать нужные блоки и разместить их в подходящих местах страницы, при этом код будет сгенерирован программой автоматически.
Если у вас нет опыта в web-дизайне, создание своего первого проекта в программе стоит начать с готового шаблона. По умолчанию в WYSIWYG Web Builder имеется около десяти шаблонов разной направленности, а еще несколько десятков можно бесплатно скачать с официального сайта программы. После загрузки шаблона вы получите возможность редактировать любой его элемент.
Для этого можно использовать многочисленные инструменты, размещенные на вертикальной панели. Для удобства они разбиты по категориям: навигация (дерево сайта, меню навигации), рисование (линия, кривая, многоугольник), мультимедийные инструменты (Flash-плеер, плеер YouTube, Java, OLE-объект), средства для работы с web-формами (поле для вставки кода CAPTCHA, флажок, кнопка для загрузки файла, поле для ввода текста), Paypal (различные кнопки для работы с этой системой электронных платежей) и пр. Если какая-либо категория средств вам не нужна в работе, ее можно свернуть, чтобы освободить место на экране для более востребованных инструментов.
Стоит обратить внимание и на категорию Extra. Тут собраны средства для создания фотогалереи, добавления подписки на новости в формате RSS, слайд-шоу, поиска по сайту. Тут же можно обнаружить целую коллекцию готовых элементов кода Javascript. Это и разнообразные визуальные эффекты, и такие полезные средства, как определение текущей версии браузера, вывод информации о времени последнего изменения веб-страницы, размещение ссылки на занесение страницы в закладки.
Несмотря на то, что работая в WYSIWYG Web Builder пользователь видит готовые элементы страницы, в браузере сайт все же может выглядеть немного не так, как в рабочем окне редактора. Для быстрого просмотра внешнего вида страницы в браузере достаточно нажать клавишу F5. WYSIWYG Web Builder откроет проект в обозревателе, который используется в системе по умолчанию. Если нужно просматривать страницы сразу в нескольких браузерах, их можно добавить в список.
Как правило, шаблон сайта состоит из нескольких страниц. Для удобного управления проектом в окне программы имеется специальная панель Site Manager, где отображается дерево страниц сайта. Используя инструменты этой панели, можно создавать новые страницы на основе шаблонов, добавлять страницы, сохраненные ранее на жестком диске, копировать уже имеющиеся страницы, просматривать их свойства и т.д.
В процессе работы над ресурсом, состоящим из большого числа страниц, могут также пригодиться такие средства программы, как проверка ссылок на работоспособность, оценка размера страниц, генератор карты сайта в виде XML-файла, который будет размещен в корневой директории сайта. Кроме этого, WYSIWYG Web Builder может помочь собрать все изображения и прочие файлы мультимедиа, которые используются на web-страницах, в одном месте.
Несмотря на то, что WYSIWYG Web Builder сам по себе является достаточно функциональным редактором, какого-нибудь инструмента вы можете в нем не обнаружить. В этом случае стоит заглянуть в галерею расширений - быть может, нужное средство доступно в виде плагина. Для программы существует более 250 расширений, и их число постоянно увеличивается. Расширения пишутся активными пользователями редактора и выкладываются на официальном форуме. Стоит иметь в виду, что подключить расширения на триал-версии WYSIWYG Web Builder нельзя, для этого программу нужно зарегистрировать.
Web Page Maker - достаточно простой визуальный редактор, который подойдет для создания небольшого сайта, включающего несколько страниц. С его помощью можно добавлять на страницу текст, векторные элементы, графические файлы, видео в разных форматах, таблицы, web-формы и прочие привычные элементы страниц.
В программе также есть готовые варианты такого важного элемента любого сайта, как меню навигации. Web Page Maker содержит различные варианты меню. Выбрав подходящий, можно сразу же отредактировать его, указав ориентацию (горизонтальное или вертикальное), расстояние между элементами, параметры текста и ссылок.
Некоторые элементы (например, то же меню навигации), должны располагаться на всех страницах сайта. При редактировании любого блока можно быстро разместить его на всех страницах текущего проекта или же указать те страницы, где он должен присутствовать.
Основную часть окна программы занимает рабочая область, а справа находится панель Site Contents. При помощи этой панели удобно управлять страницами сайта, а также отдельными элементами страниц. На вкладке Elements отображаются все блоки страницы, и щелкая по каждому из них, можно сразу же видеть, где он находится. Кроме этого, тут же можно вызвать окно свойств каждого элемента или удалить ненужные блоки. Что касается набора инструментов для создания структуры сайта, то тут стоит отметить возможность создания новой страницы на основе уже существующего в Интернете ресурса. Стоит указать его адрес, и Web Page Maker загрузит страницу, разобьет ее на блоки и сделает их доступными для редактирования.
Чтобы сделать сайт более живым, можно использовать анимационные эффекты. Примеры готового кода Javascript можно найти в библиотеке Web Page Maker. Используя их, можно изменить цвет прокрутки окна, разместить в углу экрана часы, показывающие текущее время, добавить слайд-шоу и т.д.
Когда работа над сайтом будет завершена, проект можно сохранить на жестком диске или же сразу загрузить на FTP-сервер. Причем, дополнительный клиент для этого не нужен - Web Page Maker имеет встроенные средства для работы с FTP.
Разработчики CoffeeCup Visual Site Designer, вероятно, по жизни руководствуются лозунгом "заработай на всем, на чем только можно заработать". Поэтому нужно иметь в виду, что, покупая этот визуальный редактор за $49, вы не получите в свое распоряжение все те функции, на которые можно рассчитывать после приобретения большинства других подобных программ.
Так, программа поставляется вместе с десятью шаблонами, а для загрузки остальных предлагается проследовать на сайт разработчика. Открыв соответствующую страницу, можно обнаружить, что дополнительные шаблоны платные и продаются по цене $9 за штуку. Подобные "сюрпризы" ждут пользователя и в процессе работы с приложением. Нажмите кнопку инструмента для создания web-форм, и вы обнаружите, что для работы с ним нужно заплатить еще $39, попробуйте добавить на сайт фотогалерею, и вы увидите, что и эта возможность предоставляется за дополнительную плату.
Стандартная версия программы дает возможность работать с текстом, векторными элементами, графикой. После выбора инструмента на вертикальной панели появляется плавающая палитра с его настройками. Она остается на экране до тех пор, пока пользователь не меняет инструмент. Благодаря такому подходу, на рабочую область отводится максимально много места.
Такие часто встречаемые элементы web-страниц, как счетчики и web-формы, в программе можно создавать только при помощи инструмента для вставки пользовательского HTML-кода.
Работая с векторными элементами (стрелками, многоугольниками, звездочками, выносками и т.д.), можно использовать многочисленные средства для изменения их внешнего вида. Например, есть возможность изменить прозрачность, добавить тень, сделать объект объемным, заставить его светиться или изменять формы при наведении курсора мыши. Кроме этого, можно настроить заливку каждого объекта, добавить текстуру.
CoffeeCup Visual Site Designer имеет встроенный FTP-клиент, при помощи которого можно загружать сайт на удаленный сервер. Если, загрузив сайт, вы решите внести в некоторые его страницы изменения, можно будет воспользоваться функцией синхронизации данных. В этом случае программа загрузит те страницы, которые были изменены. При необходимости, не покидая CoffeeCup Visual Site Designer, можно даже полностью удалить сайт с сервера.
Большинство визуальных редакторов похожи друг на друга. В этом есть свои плюсы, ведь разобравшись с одной из таких программ, вы уже будете чувствовать себя уверенно, если позже решите попробовать другую. Однако если вы никогда раньше не занимались созданием сайтов, даже самый простой визуальный редактор поначалу может вызвать множество вопросов, таких как: "что нужно сделать в первую очередь?", "какие инструменты программы являются основными, а какие - вспомогательными?" и т.д.
В программе WebSite X5 Evolution реализован немного иной подход к созданию сайта, благодаря чему многие вопросы отпадают сами собой. Работа приложения построена по принципу пошагового мастера, благодаря чему начинающий пользователь может быть уверен в том, что он не пропустил ничего важного.
Несмотря на то, что мастер проводит через все этапы создания проекта, пользователь может при желании "перескакивать" через некоторые этапы, выбирая в боковом меню те действия, которые он хочет выполнить в настоящий момент. Всего этапов пять.
На первом указываются общие настройки. Так, тут вводится название сайта, автор и язык, подбираются ключевые слова, загружается Favicon, выбирается тип меню (горизонтальное или вертикальное), подбирается подходящий шаблон (в библиотеке программы более сотни вариантов оформления), задается внешний вид верхней и нижней части страниц сайта.
На втором этапе предлагается создать карту сайта, то есть продумать его структуру. Используя кнопки "копировать" и "вставить" на панели инструментов, можно создавать новые страницы на основе уже имеющихся. Тут можно определить, какие страницы ресурса будут скрытыми, указать частоту обновления для каждой страницы.
Двойной щелчок по названию страницы перенесет вас на следующий этап работы над сайтом, и тут уже можно будет заняться непосредственно его содержимым. По умолчанию страница разделена на четыре блока, в каждый из которых можно добавить объект: текст, графический файл, слайд-шоу, таблицу, флеш-анимацию, мультимедиа файл и т.д. При желании число блоков на странице можно увеличить или уменьшить. Поместив объект на страницу, нужно определить его настройки, например, указать путь к графическому файлу, набрать текст и т.д. Все эти операции нужно будет проделать для каждой страницы.
На четвертом этапе WebSite X5 Evolution предложит указать некоторые дополнительные настройки, например, определить внешний вид вводной страницы, задать параметры отображения flash-рекламы, добавить на сайт блог и ленту RSS-новостей.
Среди предлагаемых возможностей есть и такой элемент как "Корзина для электронной торговли". Используя его, можно быстро создать собственный интернет-магазин. Перейдя к его настройкам, можно быстро создать категории товаров, определить условия доставки, выбрать варианты оплаты, вставить лицензионное соглашение, настроить внешний вид элементов магазина.
Наконец, на последнем этапе выполняется экспорт проекта. Готовый сайт можно сохранить на жесткий диск или же сразу загрузить на FTP-сервер. Кроме этого, программа дает возможность сохранить файлы проекта, чтобы перенести их на другой компьютер. Отметим, что создаваемый проект можно сохранить на любом этапе в собственном формате программы.
Пожалуй, единственным неудобством при работе с WebSite X5 Evolution является невозможность предварительного просмотра страниц в браузере. Если нужно увидеть, как будет выглядеть сайт, можно использовать функцию "Тест", однако на генерацию проекта требуется некоторое время. Кроме того, программа генерирует страницы в собственном просмотрщике, созданном на движке Internet Explorer.
KompoZer - бесплатный визуальный web-редактор с открытым кодом. Программа доступна не только для Windows, но и для Mac, а также для Linux. Редактор создан на движке Gecko, на котором работает широко известный браузер Firefox. Это дает ряд преимуществ: во-первых, движок прекрасно поддерживает современные web-стандарты, такие как XML, CSS и JavaScript. Во-вторых, возможности редактора, основанного на Gecko, могут быть расширены за счет подключаемых модулей.
Возможно, первым дополнением, которое вы захотите установить, будет пакет для локализации на русский язык. Устанавливается он примерно так же, как инсталлируются плагины для Firefox: в меню Tools необходимо выбрать команду Extensions, после чего указать путь к загруженному файлу локализации с расширением.xpi. После установки плагина потребуется перезагрузка программы, после чего интерфейс станет русским.
В программу интегрирован FTP-клиент, причем, его можно использовать не только для загрузки готового проекта, но и для быстрого редактирования страниц уже размещенного на сервере сайта. Указав данные для входа на сервер, можно перемещаться по дереву каталогов и выбирать страницы для редактирования. Их содержимое будет загружаться в окне KompoZer, и редактировать их можно прямо "на лету".
KompoZer дает возможность одновременно работать с несколькими страницами. Каждая из них открывается на отдельной вкладке, между которыми можно быстро переключаться. Для каждой страницы ведется своя история отмены и возврата действий. Взглянув на значок в заголовке вкладки, можно сразу же определить, вносились ли в содержимое страницы изменения, которые еще не были сохранены.
Несмотря на то, что KompoZer самостоятельно создает код веб-страниц, при необходимости можно просмотреть его и внести некоторые изменения. В нижней части каждой страницы есть вкладки, при помощи которых можно переключаться между визуальным отображением страницы и показом кода.
По умолчанию на панель инструментов программы вынесены наиболее часто используемые инструменты: добавление гиперссылки, вставка изображения, таблицы, средства для создания веб-форм и т.д. При желании можно изменить внешний вид этой панели (например, уменьшив иконки), а также добавить на нее некоторые другие инструменты.
В целом, несмотря на то, что KompoZer является визуальным веб-редактором, рассчитан он на пользователей, у которых уже есть некоторый опыт создания сайтов. Вы не найдете в нем готовых шаблонов и примеров меню навигации, но зато в программу интегрирован мощный редактор CSS, есть инструменты для проверки HTML-кода и для проверки орфографии.
Когда пользователь решает изучить какую-нибудь область, например, компьютерную графику, видеомонтаж или программирование, он часто задает вопрос более опытным товарищам - с какой программы лучше начинать осваивать новое ремесло. В некоторых случаях, действительно, лучше в начале использовать простые инструменты, а затем, разобравшись с их возможностями, переходить к более продвинутым редакторам. Что касается BestAddress HTML Editor 2010 Professional, можно сказать, что эта программа имеет все шансы стать первым и последним инструментом для начинающего веб-разработчика.
Работа в режиме визуального построения веб-страницы напоминает работу с конструктором - можно самостоятельно задавать размеры и цвет элементов, размещать по своему усмотрению кнопки, графику, меню и прочие компоненты сайта. Удобное форматирование, почти как в текстовом редакторе, может использоваться для управления положением любых элементов страницы. Шаблонов в BestAddress HTML Editor 2010 Professional вы не найдете, зато есть возможность загрузки веб-страницы, расположенной по указанному адресу. Открыв страницу в программе, можно затем отредактировать ее.
Редактор может автоматически загружать проект на сервер - для этого программа использует прилагающийся к ней FTP-клиент Digital FTP Access.
В BestAddress HTML Editor 2010 Professional имеются и профессиональные инструменты для написания кода. Новички, желающие понять принципы работы и написания HTML, CSS, Java и PHP-кода, могут обратиться к документации. В ней изложены самые главные правила написания кода, такие как - назначение тегов, примеры простейших операций и т.д. Несложные и понятные уроки дают краткое представление о структуре HTML и вводят новичка "в курс дела".
Программы, о которых рассказано в этом обзоре, позволяют достаточно быстро создать свой сайт и разместить его в Интернете. При этом следует помнить, что все эти приложения - лишь инструменты в руках пользователя. Будет ли сайт привлекать внимание посетителей, станет ли он дополнительной составляющей успеха в бизнесе, зависит исключительно от фантазии автора и от его желания совершенствовать начатое. И, конечно, для того, чтобы сайт оправдал возлагаемые надежды, вашему начинанию должна сопутствовать удача, чего всем и желаем!
ОСНОВЫ ВЕБ-КОНСТРУИРОВАНИЯ
§ 1. Представление о веб-конструировании
1.1 Инструменты и методы разработки веб-сайтов
Коротко о главном:
Выделяют две основные группы методов и соответствующих инструментов разработки веб-сайтов: визуальные и ручные . Ручные (программные) методы веб-конструирования требуют знания языка разметки HTML. Визуальные же методы позволяют производить все работы по созданию веб-страниц с высокой степенью автоматизации и не требуют знания языка разметки HTML.Они уменьшают трудоёмкость и сроки разработки сайта.
При создании веб-сайтов могут использоваться специальные инструменты – редакторы визуального конструирования. Например: Microsoft FrontPage, Adobe (Macromedia) Dreamweaver, NamoWebEditor и др. С помощью таких редакторов веб-страницы создаются в интерактивном режиме, при этом автоматически генерируется соответствующий HTML-код , который представляет собой набор команд языка разметки HTML.
Статические страницы отображаются браузером пользователя в том виде, в каком были созданы и размещены на веб-сервере. Динамические страницы генерируются по запросу пользователя – информация на них загружается серверными программами из баз данных.
1.2 Проектирование сайта
Выделяют следующие основные этапы разработки веб-сайтов:
определение тематики сайта, его целей и задач;
проектирование структуры сайта, определение разделов и связей между страницами;
разработка дизайна сайта, т.е. стиля оформления страниц;
подготовка материалов (текстов и графики) для размещения на веб-страницах;
конструирование страниц сайта (создание HTML-кода);
размещение в сети (публикация) и тестирование сайта.
Под стилем оформления веб-страницы понимают сочетание свойств элементов веб-страницы: стиля текста (совокупности параметров формата символов и абзацев) и стиля графических элементов (совокупности параметров формы).
Упражнение
Разработайте проект веб-сайта по одной из тем: Моя семья. Моя школа. Мои друзья. Мои любимые занятия. Моя Родина – Беларусь. Природа родного края. Интересные профессии.
Технология разработки:
При разработке проекта веб-сайта будем придерживаться этапов разработки веб-сайта.
Возьмём первую из предложенных тем: Моя семья.
Цель: рассказать о своей семье.
Задачи: рассказать о каждом члене семьи (имя, возраст, род занятий, предпочтения).
Структуру сайта для наглядности изобразим в виде двухуровневой схемы (рис. 1.2.1). На первом уровне поместим название веб-сайта, фото каждого члена семьи и гиперссылки.
На втором уровне схемы изобразим веб-страницы, посвящённые каждому члену семьи с информацией о каждом из них (рис. 1.2.2).
рис. 1.2.2
Спроектируем дизайн сайта. Основные структурные элементы оформления страницы (текстовые блоки) и графические объекты (рисунки-логотипы для главной страницы, фотографии членов семьи, «обои» (фоновые рисунки), текстовые гиперссылки). Для размещения элементов в заданных местах страницы будем использовать таблицы (рис. 1.1 и рис. 1.2).
Разработка проектов веб-сайтов по другим темам может производиться по схеме, указанной выше.
§ 2. Использование офисных приложений для создания веб-страниц
2.1 Создание веб-страниц в редакторе MS Word
Коротко о главном:
Упражнение
Создайте фрагмент сайта по одной из тем: Моя Родина – Беларусь. Моя школа. Мои друзья. Мои любимые занятия. Моя семья (пример главной страницы представлен на образце). В качестве гиперссылок используйте картинки из коллекции клипов.
образец
выполнить команду Файл – Создать;
выбрать пункт Веб-страница;
выполнить команду Формат – Тема;
выбрать для оформления тему Пласты .
Внести текст и изображения как показано на рис. 2.1.1:
рис. 2.1.1
для вставки рисунков из коллекции клипов воспользоваться командой Вставка – Рисунок – Картинки ;
форматировать размер рисунка командой Формат – Рисунок… - вкладка Размер (рис. 2.1.2).
рис. 2.1.2
Создать веб-страницы второго уровня mama.mht, papa.mht, iam.mht:
выполнить команду Файл – Создать;
выбрать пункт Веб-страница;
выполнить команду Формат – Тема;
выбрать для оформления тему Кипарис .
заполнить веб-страницу информацией (пример: рис. 2.1.3);
рис. 2.1.3
аналогично пп. 4а)-4f) создать веб-страницы papa.mht и iam.mht.
На главной веб-странице файла family.mht сделать гиперссылки на соответствующие веб-страницы:
выделить рисунок (текст) – Вставка – Гиперссылка …;
в поле Папка выбрать соответствующий файл (mama.mht);
при необходимости изменить текст подсказки или ввести текст;
повторить действия, опираясь на пп.5а)-5d), для остальных гиперссылок.
Презентации по темам, указанным в упражнении, выполнить аналогично пп. 1-6.
2.2 Сохранение презентаций PowerPoint в виде веб-страниц
Коротко о главном:
Презентацию PowerPoint можно сохранить в виде веб-страницы выполнив следующие действия: выбрать меню Файл – выбрать пункт Сохранить как веб-страницу – в окне Сохранение документа Веб-страница (*. htm , *. html ) – ввести имя файла – нажать кнопку Сохранить .
Параметры веб-страницы можно настраивать в окне Публикация веб-страницы по нажатию кнопки Опубликовать . В этом окне можно выбрать публикуемые объекты (Полная презентация или Слайды ), поддержку браузеров, изменить заголовок таблицы.
Упражнение
Создайте фрагмент сайта на основе готовой презентации:
а) «Электрический ток»;
б) «Пространственные фигуры»;
в) «Животные родного края»;
г) «Оптические приборы».
Технология создания:
Открыть предложенный учителем файл с презентацией по одной из указанных тем.
Сохранить презентацию в виде веб-страницы: Файл - выбрать пункт Сохранить как веб-страницу – в окне Сохранение документа выбрать тип сохраняемого файла Веб-страница (*. htm , *. html ) – ввести имя файла (или оставить прежнее) – нажать кнопку Сохранить .
Изменить настройки и параметры веб-документа во время сохранения презентации: нажать кнопку Опубликовать (рис. 2.2.1)
рис. 2.2.1
Настроить цветовые эффекты: в окне Публикация веб-страницы нажать кнопку Веб-параметры (рис 2.2.2)– вкладка Общие – выбрать цветовую схему Цвета презентации (рис. 2.2.3) – если а презентации есть гиперссылки, то снять флажок Добавить панель смены слайдов – Ок - Опубликовать .
рис. 2.2.2
рис 2.2.3
Просмотреть сохранённый фрагмент веб-сайта в браузере.
§ 3.Основы языка разметки HTML.
3.1 Создание HTML-документа в редакторе Блокнот
Коротко о главном:
Абзац задаётся тегом
При просмотре в браузере абзацы отделяются друг от друга пустой строкой. Для принудительного перехода на новую строку без создания абзаца используется непарноый тег
.
Полужирное начертание символов задаётся тегом , курсивное начертание символов задаётся тегом i.
Цвет фона всей страницы задаётся атрибутом bgcolor, цвет текста – атрибутом text.
Для задания шрифта, цвета и размера символов используется тег. Шрифт задаётся арибутом face, значением которого является название шрифта, например Arial. Размер символов задаётся атрибутом size и может выражаться в условных единицах, которые могут принимать значения от 1 до 6. Цвет символов задаётся атрибутом color.
Упражнение
Откройте предложенный учителем текстовый документ в редакторе Блокнот . Оформите и сохраните его в виде веб-страницы, изображённой на одном из рисунков. Для создания цвета фона воспользуйтесь Приложением 2.
образец 1
Технология оформления:
Открыть предложенный учителем текстовый документ в редакторе Блокнот (рис. 3.1.1).
рис. 3.1.1
Добавить в документ (рис. 3.1.2):
теги для открытия и закрытия HTML-документа (-);
теги для размещения неотображаемой на странице служебной информации (-);
теги с текстом для информации, отображаемой в заголовке окна браузера (Образец 1);
теги для размещения информации, отображаемой в браузере (-
Каждый веб дизайнер и кодер нуждается в хорошем редакторе веб страниц для создания и редактирования HTML, CSS и JavaScript кода. Notepad (Windows) и TextEdit (Mac) — отличные инструменты для начала, но вскоре по мере накопления опыта работы захочется использовать более солидный и удобный инструмент.
Существует сотни отличных редакторов, среди которых можно подобрать подходящий, однако многие из них являются платными. А если не хочется нарушать авторское право, а бюджет не располагает средствами на покупку коммерческого продукта? В данной статье рассматриваются несколько отличных бесплатных редакторов.
KompoZer — отличный выбор, если вам нужен визуальный редактор в условиях ограниченного бюджета
Komodo Edit - хороший редактор, простой в освоении, но мощный и расширяемый
Хотя это и редактор общего назначения, он поддерживает HTML и CSS, и имеет свойство контекстного автозаполнения HTML тегов и свойств CSS, а также коллекцию вставок кода для различных элементов HTML. Для того, чтобы получить максимум от использования Komodo, нужно установить расширение HTML Toolkit , которое содержит такие чудесные свойства как, автозакрытие тегов, предварительный просмотр вида CSS, и генератор временного текста.
Komodo Edit позволяет просматривать редактируемые страницы в любом установленном браузере, или использовать встроенный браузер в отдельном окне, так что можно редактировать и видеть результат изменений одновременно.
Редактор имеет встроенную функцию загрузки файлов на сайт (FTP, FTPS, SFTP, или SCP), а также вы можете чудненько группировать ваши файлы с помощью опции менеджера проекта.
Очень полезная функция Code > Select Block . Она выделяет текущий основной блок HTML, например, текущий закрытый элемент div или ul . Очень удобная функция, когда нужно выделить целую секцию на странице для копирования или перемещения.
В редакторе Komodo Edit есть очень много мощных и полезных функций, такие как использование регулярных выражений для поиска/замены, возможность выполнять внешние команды, и так далее. К счастью, редактор обладает также хорошей справочной системой, которая позволяет легко освоить всю мощьKomodo Edit.
Aptana Studio - это полноценная интегрированная среда разработки веб приложений с большим набором плагинов. Хотя вы можете использовать ее только как редактор HTML/CSS/JavaScript кода
Notepad++ - отличная замена для Notepad из Windows. Несмотря на то, что у него нет такого набора опций, как у других редакторов, он отлично подходит для редактирования HTML, CSS, JavaScript и других файлов с кодом
PSPad - другой редактор общего назначения для Windows с большим набором функций полезных для HTML и CSS кодеров
jEdit - это кросс-платформенный редактор текста с мощными функциями макро команда и плагинов. Установите плагин XML, если вам нужно редактировать веб страницы
TextWrangler - это легкий редактор общего назначения. Несмотря на отсутствие специальных функций для веб разработки, его можно использовать для работы с веб страницами.
Vim определенно сложен для освоения, но если вы преодолеете трудности, то никогда не захотите вернуться обратно!
Дедушка редакторов текста для программистов Vim (прямой потомок редактора vi) - это консольный редактор текста с открытым кодом. Он устанавливается редактором по умолчанию в почти всех разновидностях Unix, включая Linux и Mac OS X. Также редактор доступен для использования в Windows и многих других системах.
Vim не является системой, которую можно поставить и начать использовать сразу, до этого никогда не имев с ней дела. Большинство команда редактирования включают странные сочетания наподобие:wq и / . Он также имеет три режима редактирования: режим вставки , в котором вводится текст; визуальный режим для выделения текста; и командный режим для ввода команд. Такое функционирование является наследием Unix тех дней, когда не было ни окон ни мышки.
Почему он попал в список? Если вы освоите его, то убедитесь в его быстроте и мощности. С помощью нескольких команд можно за несколько секунд сделать то, что в других редакторах может занять минуты.
существует большое количество макросов и плагинов для Vim, которые облегчают работу с кодом HTML, CSS и JavaScript, включая подсветку синтаксиса, автозавершение, HTML Tidy, и просмотр в браузере. Вот большой список полезных ссылок:
Fraise - интуитивный редактор для Mac, с набором функций, достаточных для веб редактирования
Как и TextWrangler и gedit, Fraise - чудесный легкий редактор, который приятно использовать. Он является ответвлением от редактора . Он относительно новый и у него нет нормального веб сервера. В настоящее время он поддерживается только в Mac OS X 10.6 (Snow Leopard), то есть, если вы используете версию 10.5, то вам придется загрузить Smultron.
Fraise имеет несколько чудесных опций для веб редактирования:
Fraise стоит изучить, если вы используете Mac и вам нужен удобный редактор с большими возможностями, чем встроенный TextEdit.
Нарисованный шаблон сайта требует «вёрстки» - процесса формирования HTML-кода веб-страниц в текстовом или WYSIWYG-редакторе, который браузеры переведут в то, что мы видим в качестве сайта. Для этого требуются графический редактор - программа для ПК для создания отдельных от общего рисунка дизайна картинок и редактор для написания собственно кода.
Нарисованный шаблон сайта требует «вёрстки» - процесса формирования HTML-кода веб-страниц в текстовом или WYSIWYG-редакторе, который браузеры переведут в то, что мы видим в качестве сайта. Для этого требуются графический редактор для создания отдельных от общего рисунка дизайна картинок и редактор для написания собственно кода.
Нас интересует, на данный момент, какой лучше редактор использовать для создания собственно кода. Опытные верстальщики скажут, что лучше текстового редактора типа Блокнот или немного усложненного Notepad++, ничего нет. Но это решение для тех, кто уже является очень опытным верстальщиком и сразу «видит», что будет отображаться на странице браузера. Тем, кто еще не достиг такого уровня мастерства, требуется помощник - визуальный WYSIWYG-редактор.
Программы для верстки
Список таких редакторов может быть достаточно большим. Существует довольно много редакторов в разной степени развития. Вот небольшой перечень возможных претендентов на звание «мой любимый веб-редактор»:
Покопавшись в Интернете, вы пополните этот список, наверное, еще парой десятков названий.
Рассмотрев характеристики, возможности, достоинства и недостатки WYSIWYG редакторов, достаточно просто понять, что все они содержат профессиональные средства разработки, необходимые для создания веб-страниц. И, в принципе, если не заниматься перфекционизмом, для успешной работы достаточно использования любого современного визуального редактора. Но если говорить о постоянной профессиональной работе, то по-настоящему конкурентных программ, все же, не так много. Рассмотрим на наш взгляд лучшие из них: Microsoft Expression Web и Adobe Dreamweaver в качестве платных, и NVU и KompoZer – как бесплатные альтернативы.
Dreamweaver обладает всеми необходимыми средствами для генерации страниц HTML любой сложности и масштаба в визуальном режиме.
Эта программа занимает позицию одного из лидеров в рейтинге профессиональных программ для создания сайтов за счет богатого инструментария, наличия всевозможных настроек, удобного интерфейса и других особенностей.
Основные возможности программы:
Dreamweaver старается автоматизировать все, что только можно автоматизировать при верстке, он наглядно отображает код, получившийся вследствие изменений дизайна, позволяет строить таблицы «на лету», не впадая в длительные математические изыскания, а сразу же, в процессе работы, наблюдая происходящие изменения.
Упрощение ключевых моментов процесса разработки и верстки – одна из главных особенностей редактора. Прямая работа с кодами сведена к разумному минимуму. Сам код получается достаточно легким для понимания и использования, а визуальные средства, интегрированные в Dreamweaver , позволяют упростить создание различных визуальных эффектов всего до нескольких кликов мышкой.
Интерфейс Dreamweaver очень хорошо продуман, удобен, нагляден и прост в освоении. Это то, что однозначно отмечают все, кто с ним работает. Вот несколько моментов, которые можно выделить особо:
Dreamweaver автоматически находит ошибочный код в ведущих браузерах и подскажет причину и решение потенциальной проблемы. Он проверяет код по XHTML- и CSS-стандартам. В этом плане просто необходимо вспомнить про плагин Zen Coding под Dreamweaver от которого в восторге все, кто занимается версткой.
Также, редактор дает возможность получить решение CSS-проблем при помощи специального ресурса Adobe – CSS Advisor: сообщества разработчиков и дизайнеров. Редактор кода Dreamweaver – это хороший инструмент, позволяющий автоматизировать нахождение и решение множества наиболее популярных CSS-ошибок, что позволяет вести кроссбраузерную разработку.
Другое преимущество - интеграция с Adobe Photoshop. Используя Dreamweaver и Photoshop можно непосредственно копировать и вставлять изображения в Dreamweaver . Просто надо выбрать тип компрессии и файл, а также место вставки в документ.
Этот визуальный редактор имеет еще одну сильную сторону: работу с шаблонами. Мало того, что предлагает на выбор воспользоваться встроенными одно-, двух- или трехколоночными шаблонами, которые могут быть как фиксированной, так и «эластичной» ширины. На нем очень удобно делать собственные шаблоны и потом привязывать к страницам. Достаточно просто сохранить темплейт и Dreamweaver внесет изменения во все странички сразу.
Отдельно надо отметить встроенную поддержку популярных CMS: Joomla, Drupal и WordPress. Для тех, кто работает в этих системах, возможность создавать шаблоны с адаптацией под требования используемой CMS – это очень удобно.
Если же вы используете другие системы управления содержимым сайта, то вам будет полезна интеграция программы с PHP. Dreamweaver будет не только следить за правильностью написания кода, но и выдавать подсказки как по использованию самого PHP, так и по использованию сторонних библиотек.
В свете последних тенденций использования сетевых сервисов для решения индивидуальных задач компания Adobe предоставляет пользователям своих продуктов доступ к своим сетевым службам: интеграции с Adobe BrowserLab, новой онлайн-службой Adobe CS Live. Сервис Adobe BrowserLab дает возможность веб-дизайнерам быстро протестировать свои сайты на работоспособность в разных браузерах и в разных операционных системах.
Необходимо отметить и наличие встроенного FTP-клиента, который позволит сразу по окончании работ над проектом загрузить его на хостинг или внести изменения на уже работающем сайте.
В качестве недостатка надо отметить то, что программа довольно требовательна к ресурсам компьютера.
Microsoft Expression Web обладает несомненно большими достоинствами, чем любой бесплатный продукт. В паре с SuperPreview этот редактор дает необходимые инструменты для работы над созданием сайта: PHP, HTML/XHTML, CSS, JavaScript, ASP.NET, ASP.NET AJAX, Silverlight, Flash, Windows Media и Photoshop, а также интеграцию с Microsoft Visual Studio. Он обеспечивает визуальную диагностику проблем верстки, возможность кроссбраузерной верстки, возможность отладки кода при сложных разработках, CSS дизайн. Поставляется он в составе пакета Microsoft Expression Studio Web Professional , который позволяет еще и обрабатывать графику и видео.
В можно добавлять свои собственные компоненты – меню, панели инструментов, кнопки и даже диалоговые окна, используя только HTML, CSS, javascript и XML. Встроенные инструменты SEO-аналитики позволяют веб-мастеру не только провести проверку повторяющихся или недостающих заголовков и мета-тегов, но также проверить содержимое на "чувствительность" к поиску, чтобы убедиться в том, что компоненты страницы не содержат общеприменимых значений.
Проектировщики Expression попытались создать комфортную обстановку для интернет-пользователей с чертами, которые являются чрезвычайно похожими на Adobe Dreamweaver . Этот редактор от Microsoft производит достойный, совместимый со стандартами код и знает, как работать с CSS и CSS-макетами.
Expression - не преемник прежнего редактора Frontpage - это довольно разные инструменты разработки. Microsoft Expression – скорее, конструктор ориентированный и направленный на обеспечение общей веб-разработки.
Надо отметить, что Microsoft Expression Web не поставляется сам по себе, а только в пакете. Профессиональный пакет Web Studio 4 содержит полный набор профессиональных инструментов для проектирования и разработки при создании современных веб-узлов, для потокового видео и веб-графики. Это включает в себя три профессиональных приложения, которые работают совместно: Expression Web, Expression Encoder и Expression Design .
Expression Encoder позволяет кодировать широкий спектр видео форматов и использовать их в веб-проектах. Expression Design упрощает рабочий процесс с помощью инструментов рисования.
Основные возможности Microsoft Expression :
NVU и KompoZer
Особенность редактора NVU состоит в его кроссплатформенности: есть версии под Linux, Microsoft Windows и Mac. Он вполне достойно соперничал с FrontPage и Dreamweaver , а в некоторых аспектах Nvu действительно предоставляет больше возможностей, чем можно было ожидать от абсолютно бесплатного программного обеспечения.
Помимо типовых функций для веб-редакторов, Nvu предлагает интегрированный FTP-менеджер, мощную поддержку для форм, таблиц и шаблонов, и он действительно очень прост в использовании. Одна из сильных сторон этого редактора работа со стилями. Этот реализовано благодаря CaScadeS, хорошо известному редактору CSS, который интегрируется в Nvu как дополнительный модуль и позволяет легко создавать и управлять стилями и видеть, как применяются стили "на лету" в документе.
Nvu является open source-решением и выпускался под Mozilla Public License (MPL). К сожалению, в последние несколько лет развитие NVU не продолжается. Однако потенциал этого редактора продолжает реализовываться в редакторе KompoZer, который есть ни что иное как ответвление (форк) от NVU. KompoZer является веб-авторской системой, которая сочетает в себе менеджер для веб-файлов и WYSIWYG-редактор. По сравнению с NVU, Kompozer производит более чистый код разметки.
KompoZer чрезвычайно прост в использовании, что делает его лучшим решением для пользователей, которые хотят создавать сайты без получения серьезных технических знаний. Kompozer может рассматриваться в качестве альтернативы для небольших проектов и для пользователей, без технических знаний. Но эта программа слаба для профессиональных веб-разработчиков.
Некоторые из возможностей NVU:
Резюме
Подводя итог всему вышесказанному, хочется отметить, что существует большое количество хороших, грамотно разработанных программ, которые предлагают различную функциональность, требуют разной степени подготовки пользователя и заметно различаются по стоимости. Профессионалам придется выбирать между и Dreamweaver . Последний имеет явное предпочтение по функционалу и удобству работы, зато может работать с пакетом программ по обработке видео и собственные инструменты поисковой оптимизации. и можно приобрести у партнеров «1Софт».
Непрофессионалам и пользователям других операционных систем можно попробовать Nvu и его развитие – Kompozer.
Роберт Басыров
Все права защищены. По вопросам использования статьи обращайтесь к
1 уровень
Задание 1
Выберите правильный ответ.
Что означает название Всемирная Паутина (WWW – World Wide Web ?
1. Название глобальной компьютерной сети.
2. Имя сервера, на котором хранятся Веб-страницы.
3. Набор правил, определяющих порядок представления и пересылки информации в Интернете.
4. Название службы Интернета, занимающейся хранением и передачей мультимедийных гипертекстовых документов.
Задание 2
Выберите правильный ответ.
Что такое Веб-страница?
1. Документ, содержащий текст, графику, звук, видео и гиперссылки на другие документы, структура которого описана на языке HTML.
2. Любой гипертекстовый документ, содержащий текст, графику, звук, видео и гиперссылки.
3. Хранилище мультимедийной информации
4. Служба Интернет, занимающейся хранением и передачей мультимедийных гипертекстовых документов
2 уровень
Задание 3
Выберите правильный ответ.
Каково назначение программы-браузера?
1. Это универсальная программа для доступа к информационным ресурсам Интернета, в первую очередь – для просмотра гипертекстовых документов Всемирной Паутины.
2. Браузер позволяет работать только с электронной почтой.
3. Браузер выполняет только просмотр гипертекстовых документов, представляющих собой Web-страницы
Задание 4
Допишите предложение:
Для создания веб-сайтов используется язык разметки гипертекстовых документов –
Задание 5
Перечислите известные редакторы визуального конструирования .
_____________________________________________________________________________
Задание 6
Как называется фрагмент HTML-кода, заключенный в угловые скобки?
__________________________________________________________________________
Задание 7
Просмотрите текст HTML-документа и ответьте на вопросы:
А. Какой цвет фона и текста будет на веб-странице?
Б. При выводе заголовков на веб-странице размер их уменьшается или увеличивается?
Задание 8
Каким тегом задается абзац?
Задание 9
Как задать фон и цвет всей страницы?
Задание 10
Какой тег отображает рисунок на веб-странице?
3 уровень
Задание11
1. Используя материалы к данной контрольной работе, создать главную страницу сайта, содержащий меню (оглавление). (Для того чтобы аккуратно разместить тексты и графику, лучше использовать таблицы).
Рисунок ‑1
4 уровень
Задание 12
Используя материалы к данной контрольной работе, создать 5 веб-страниц:
· веб-страница «Витязь» (файл vitaz. htm), как показано на рисунке 2;
· веб-страница «Вистан» (файл vistan. htm)
· веб-страница «ВЗЭП» (файл vzep. htm)
· веб-страница «НАФТАН» (файл naftan. htm)
· веб-страница «ПОЛИМИР» (файл polimir. htm)
Рисунок ‑2
5 уровень
Задание 13
