Инструментарий для создания Web-сайтов

Инструментарий для создания Web-сайтов

Основная часть. Обзор инструментальных средств для создания Web-сайта. 5

Koala HTML. 5

HotDog Pro. 5

Блокнот. 6

Macromedia Dreamweaver 7

Adobe Golive. 8

Microsoft Front Page. 8

2. 7 CoffeCup 9

2. 8 Web Weaver 97 10

В последние десятилетия мир переживает переход от «индустриального общества» к «обществу информационному». Происходит смена способов производства, мировоззрения людей. Людьми все чаще используется такие понятия как «информация», «информатизация», «информационные технологии» и т. д.

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

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

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

Данная цель определяет следующие задачи:

1. рассмотреть различные программные продукты для создания Web-сайтов;

2. изучить практическим путем плюсы и минусы программ;

3. повысить общий уровень культуры в области информационных технологий.

Обучаясь в МОУДОД «Центр детского и юношеского научно технического творчества» по направлению Web-дизайн, на занятиях мы учимся создавать собственные сайты, педагог ведет обучение в программе Macromedia Dreamweaver 4, мне стало интересно: какие существуют еще программы, почему выбор педагога остановился на данном редакторе.

Второй год нами исследуется данный вопрос, в начале работы нами были выбраны такие редакторы как: Microsoft Word, Microsoft PowerPoint, Блокнот, Adobe Golive, Macromedia Dreamweaver, Microsoft Front Page. Программные продукты Microsoft Word, Microsoft PowerPoint были рассмотрены в связи с тем, что любой пользователь, который только с этими пакетами работал, сможет в них выполнить Web-страничку, Блокнот – так как он включен в состав системы windows, и многие Web-дизайнеры делают в данном редакторе отладку страниц. Adobe Golive, Macromedia Dreamweaver, Microsoft Front Page – профессиональные пакеты. После проведенного исследования нами было доказано, что не профессиональные программы можно использовать для создания Web-страниц, но они по всем параметрам уступают страницам созданным в профессиональных программах. Продолжая работу над данной темой, нами выбраны новые редакторы для исследования, и исключены непрофессиональные, за два года нами рассмотрено 10 программ. В ходе работы четко выработаны критерии, по которым мы сравнивали качества редакторов.

Обзор инструментальных средств для создания Web-сайта

Для того чтобы создать действительно интересный и полезный сайт, были рассмотрены популярные редакторы, автоматизирующих процесс создания Web-страниц: Koala HTML, HotDog Pro, Coffee Cup, Web Weaver 97, Блокнот, Adobe Golive, Macromedia Dreamweaver, Microsoft Front Page.

Koala HTML

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

HTML коалы показывает удобную и интуитивную окружающую среду, которая имеет типовые страницы, кодовые отрывки, пункты DHTML/Java, которые могут быть просто вставлены в вашу вновь созданную страницу. Так же как типовую графику сети, которую вы можете использовать в ваших разработанных Web-страницах, включая много второстепенных изображений и кнопок.

Но есть и другие достоинства у этой программы – это то, что с левой стороны рабочей области, расположены так называемые Quick Tag Items в дословном переводе на русский язык – статья быстрых тегов. Это значительно ускоряет работу, но если ты не знаешь HTML язык, ты ни как не сможешь работать в этой программе, что относится также не к лучшим качествам этой программы.

Упрощена работа с рисованием таблицы, вставкой изображения, гипертекстовыми ссылками и начертанием шрифтов. При сохранение документа, программа предлагает сохранить только, только как HTML файл с расширением *. hml или *. html.

Редактор HotDog Pro

Для сравнения мы рассмотрели программу HotDog Pro, предназначенную только для создания Web-сайтов. HotDog – замечательный инструмент для создания эффектного HTML-документа.

Редактор HotDog не является WYSIWYG-редактором, но, не смотря на это, остается любимым инструментом Web-сообщества. HotDog поддерживает все новейшие HTML 3. 2. Он чрезвычайно популярен среди Web-разработчиков благодаря тому, что позволяет внедрять мультимедийные спецэффекты, и хорошо совместим с другими инструментами Web, выпущенными той же фирмой.

Одна из самых впечатляющих возможностей редактора HotDog – встроенные средства создания таблиц и графики с помощью диалоговых окон, которые проводят вас через весь процесс. Просто щелкнув на кнопке таблицы или графики на панели кнопок редактора, вы увидите диалоговое окно, которое поможет создать нужный элемент. Это позволяет избежать утомительного процесса написания HTML-кода.

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

Установив HotDog на своем компьютере (в этом он вам сам поможет), вы можете настроить его таким образом, чтобы ваши HTML-документы можно было просматривать прямо из редактора с помощью браузера Internet Explorer.

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

Блокнот

Для создания и редактирования текстовых документов используют специальные программы – текстовые документы. В состав системы windows входит простейший текстовый редактор Блокнот, который можно использовать для подготовки не очень сложных текстовых документов. Несмотря на очевидную ограниченность этого редактора, стоит уделить время для изучения приемов работы с ним. При помощи обычного текстового редактора и языка HTML позволяет создать web-документы. При этом управляющие коды, вносимые в текст, не несут никакой информации о внешнем виде документа, а лишь указывают границы и соподчинение его составных частей, т. е. задают его логическую структуру, позволяющую соединять связями не только текст, но и графику, звуки, видео. Основным фактором, определяющим специфику HTML, его применение в Интернет. Хотя освоение языка HTML-это не столь уж и легкое дело, сама необходимость, что-то изучать многими воспринимаются как досадная неприятность. Одним из плюсов знания языка HTML является то, что создаваемый программами (Adobe Golive, Macromedia Dreamweaver, Microsoft Front Page) HTML-код, не всегда оптимален, ибо практически невозможно создать такую программу, которая не «перестраховывается». Используемые в настоящее время броузеры допускают некоторую вольность в интерпретации кода, что позволяет получить небольшой выигрыш в объеме кода при его написании «вручную». Да и вообще, иногда быстрее ввести что-нибудь самостоятельно, чем долго возиться с многочисленными палитрами и инспекторами.

Macromedia Dreamweaver

По мнению большинства профессиональных Web-дизайнеров программа Macromedia Dreamweaver представляет собой профессиональное средство проектирования и разработки Web-узлов. Визуальное проектирование и управление Web-узлами для любых типов браузеров с сохранением всех возможностей HTML. В то время как GoLive и Microsoft Front Page все свои преимущества получают за счет интеграции с другими программными средствами, Dreamweaver выигрывает за счет удобного интерфейса и оригинального подхода к созданию Web-страниц. Достоинства Dreamweaver заключается в том, что программа осуществляет полный контроль над исходным текстом. В целом подход Dreamweaver к дизайну интерфейса сводится к тому, что вы можете работать с минимальным количеством панелей инструментов на экране. Очень важно – иметь быстрый доступ к часто используемым функциям.

В то же самое время не стоит забывать о том, что Dreamweaver – продукт Macromedia, фирмы-разработчика мультимедийных приложений. Это означает интеграцию с Macromedia Flash. Более того, Macromedia распространяет Dreamweaver вместе с Flash, Fireworks (приложение для создания анимации и оптимизированных изображений) и т. п. эти пакеты (Macromedia называет их Studio) обычно обходятся дешевле, чем наборы из отдельных программ. Flash-графику способны отображать большинство браузеров и web-приложений. Архитектура Macromedia Flash Objects является расширяемой, поэтому разработчики могут создавать новые объекты для Dreamweaver, например, график, диаграмму и даже «бегущую строку» новостей, вставлять даты, адреса электронной почты, средства навигации, меню переходов, специальные знаки, создавать окна с фреймами (framesets).

Преимуществом Dreamweaver является то, что этот редактор удобен своим сочетанием визуального и текстового подходов к созданию Web-страниц. С ним будет приятно работать как новичку, так и профессиональному автору HTML-страниц. Можно начать работу с чистого листа, и перед вами будет нечто вроде мощного текстового редактора.

Одной из полезных возможностей при создании страниц в Dreamweaver является работа с двойным окном кода и графического представления. В редакторе имеются три режима: просмотра исходного кода, просмотра результирующей страницы и двойного окна, в котором сверху расположен код, а снизу – его представление в графическом режиме. Редактировать можно и то и другое. Это очень популярная и полезная возможность. Активными являются оба окна. По крайней мере, подсвечивается и там и там всегда одна и та же часть страницы [5].

Adobe GoLive

Редактор GoLive считался большим достижением для своего времени. Это была одна из первых программ, которая предлагала несколько отступить от общепринятого принципа ручного создания страниц. Для того чтобы написать Web-страницу, оказалось достаточным овладеть несложным редактором, а что уж он там создавал, могло оставаться тайной. Поначалу возможность показалась очень перспективной, но со временем у такого подхода появилось больше противников, чем сторонников. С самого начала программа GoLive была межплатформенной и остаётся популярной вот уже многие годы.

У GoLive есть огромное множество разных функций, включая редактор JavaScript, поддержку технологии «drag-&-drop» (перетаскивания элементов из одних документов в другие), причём для мультимедиа, возможность работы с технологиями типа CSSP. По определению, это приложение находится на профессиональном уровне.

Одним из очевидных преимуществ GoLive является максимальная интеграция веб-редактора с другими продуктами фирмы Adobe. К примеру: Photoshop, анимацией, созданной в Adobe ImegeReady, а также файлами Adobe Illustrator или Adobe Live Motion. Это целый комплекс программ, дополняющих друг друга, но в то же время способных работать совершенно независимо.

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

Для работы в GoLive необходим большой монитор с высоким расширением. Это связано с огромным количеством панелей инструментов, которое при разрешение 800 х 600 просто не помещаются на экране [5].

Microsoft Front Page

Front Page – это популярный Web-редактор, особенно среди приверженцев набора программ Microsoft Office и тех, кто создает сайты специально для серверов на основе Microsoft-технологий. Он имеет сильные родственные связи с такими сложными программами, как Word, Excel, и другими Office-приложениями. В то же время заметна интеграция и в Web-технологии с применением языков, скриптов и интерфейса Microsoft. Microsoft Front Page удобен для начинающих пользователей. Это общая концепция, которой компания Microsoft традиционно придерживается во всем.

Он и выглядит как типичное приложение из серии Microsoft Office. Человек, знакомый с Word, Excel, Access, может начать пользоваться Front Page сразу же, основываясь на опыте работы с другими приложениями. Вы найдете тут и панели инструментов, очень похожие на панели инструментов Word, и эту вездесущую «скрепку» с ее советами. Есть здесь и наборы мастеров, автоматически создающих страницы в соответствии с заданными параметрами шаблонов.

Одна из самых сильных сторон этого редактора – это простота использования. Мастер поможет создать традиционный интерфейс с маленькими изображениями для предварительного просмотра, являющимися одновременно ссылками на изображения нормального качества. В Front Page существует еще множество подобных мастеров, шаблонов, всяческих помощников. Их применение освобождает автора веб-сайта от рутинной работы. Если сайт вам нужен для чисто утилитарных, практических целей, и вы понимаете, где здесь место творчеству, можете за полчаса создать Web-узел с гостевой книгой, форумом, обратной связью и HTML-формами. Но помните, что все это будет выглядеть весьма банально. Следует учитывать: что бы это все работало, на вашем сервере должен быть установлен пакет Front Page Extensions, в противном случае все эти компоненты работать не будут, что переходит в раздел недостатки программы.

Достоинство Front Page – приложение Microsoft, где все работа построена на основе шаблонов, мастеров; помощников, можно отнести к недостаткам, какой бы Вы ни создали продукт, он получится стандартным, не будет иметь своего индивидуального дизайна. Также можно недостатком отметить, что редактор очень сильно зависит от собственных расширений: Front Page Extensions – это набор приложений, в основном серверов, разработанных фирмой Microsoft. Наконец, программный продукт как Front Page – может быть использован только для создания небольших персональных сайтов [5].

Coffee Cup HTML

CoffeCup – еще один стандартный HTML-редактор, принцип которого подобен HotDog. Существует очень много сторонников этого редактора, даже не смотря на то, что это текстовый HTML-редактор. Он позволяет легко и быстро размечать и создавать красивые Web-страници.

Кроме редактирования HTML, CoffeCup обладает еще некоторыми встроенными возможностями:

• Подборки анимационных GIF-файлов, встроенных в редактор и подготовленных к использованию на Web-странице

• Подборка апплетов JavaScript, выполняющих интерактивные задачи для посетителей.

• Выбор цветового кода для фона путем щелчка в нужном цвете виртуальной радуги.

• Многочисленные возможности создания Web-страниц и управление ими.

Web Weaver

Web Weaver – всесторонний, богатый особенностью редактор текста HTML для Windows, который облегчит создавать Web-страницы. Web Weaver – мощный редактор, который является идеальным для новичков так же как передовых пользователей HTML.

Web Weaver имеет удобный в работе интерфейс, который состоит из панелей инструментов, меню со спуском, и окна текста. Кроме того, есть меню стороны со списком файла/справочника в версии Windows 95. Панели инструментов обеспечивают быстрый способ вступить обычно, используемый HTML помечает, получая доступ к общим функциям редактора (как, открыть, справка и Печать), и для того, чтобы начинать создавать веб-сраницу или познакомиться с Web Weaver. Меню со спуском – для того, чтобы получить доступ к командам и для того, чтобы вставить признаки HTML. Окно текста – то, где Вы печатаете ваш документ. Эти элементы показывают на картине ниже.

Вот – некоторые особенности Web Weaver:

1. Структуры, Столы и Формы все поддержаны Web Weaver. Это включает удобных помощников для того, чтобы создать эти передовые элементы HTML. HTML 2 и 3. 2 признака поддерживает.

2. Удобные в работе панели инструментов, которые автоматизируют повторный вход клавиатуры (типа

, <векселя к получению>)

3. Интуитивные диалоговые окна для вставки гипертекста, действующих изображений, якорей, списков, и т. д.

4. Контекстно-зависимая помощь с большой ссылкой HTML, покрывающей HTML 2 и 3 спецификации.

5. Netscape и Расширения HTML Internet Explorer включены.

6. Присутствие просмотра с указанным браузером при нажатие кнопки. Это позволяет пользователю рассматривать их документ.

7. HTML полосы помечает из документа, выдвигая кнопку полосы.

Это приводит к созданию документа текста с удаленными признаками HTML.

Начало документа HTML не трудная вещь. Как только Вы приобретаете навык этого, Вы будете писать десять Web-страниц в день. Важно иметь хорошую форму, когда Вы пишете Web-страницы.

Обучаясь в МОУДОД «Центр детского и юношеского научно технического творчества» по направлению Web-дизайн, на занятиях мы учимся создавать собственные сайты, педагог ведет обучение в программе Macromedia Dreamweaver 4, мне стало интересно: какие существуют еще программы, почему выбор педагога остановился на данном редакторе.

Первым действием для выбора инструментария были рассмотрены программы: Блокнот, Koala HTML, Web Weaver 97, CoffeCup HTML Editor, HotDog Professional 6, Macromedia Dreamweaver 4, Microsoft FrontPage, Adobe Golive.

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

1. визуальность редактора;

2. объем оперативной памяти программы;

3. интерфейс программы;

4. объем созданных сайтов в выбранных редакторах;

5. присутствие функции предварительного просмотра создаваемого продукта в программе;

6. возможность работы в программе с несколькими страницами одновременно;

7. загрузка сайтов через Internet Explorer (с локальной папки).

Первым критерием отбора было рассмотреть данные программы по первому критерию – визуальность редактора. Практическим путем было выяснено, что Macromedia Dreamweaver 4, Microsoft FrontPage, Adobe Golive является визуальной, а Блокнот, Koala HTML, Web Weaver 97, CoffeCup HTML Editor, HotDog Professional 6 не являются визуальными, что не является положительным качеством этой программы.

Вторым этапом нашей работы являлось определение объема редакторов, для это выделялись программные файлы программ и с помощью контекстного меню ( свойства получены данные:

№ п/п Название программы Объем программы

Блокнот 52 КБ

Koala HTML 2. 98 МБ

Web Weaver 97 5. 04 МБ

CoffeCup HTML Editor 10. 3 МБ

HotDog Professional 6 21. 4 MБ

Macromedia Dreamweaver 4 89,5 МБ

Microsoft FrontPage 180 – 200 МБ

Adobe Golive 296 МБ

Из данных приведенных в таблице можно сделать вывод, что Блокнот является самым «легким» программным продуктом. Программы Koala HTML, Web Weaver 97, HTML Editor, HotDog не занимают большого места на диске, но не являются визуальными.

Рассматривая программы: Macromedia Dreamweaver 4 – 89,5 МБ самый оптимальный по весу из визуальных программ, Microsoft Front Page ~ 200 МБ (в зависимости от версии) и Adobe Golive оказался самым тяжелым – 264 МБ.

Третьим не маловажным критерием для выбора предлагаем рассмотреть интерфейс программы. Из приложений видно, интерфейс в программе Блокнот практически отсутствует, редактор Koala HTML имеет только несколько дополнительных функций, Web Weaver 97, CoffeCup HTML Editor, HotDog Professional 6 имеют средний интерфейс. В программе Adobe Golive слишком много дополнительных, вспомогательных функций, пользователю необходимо потратить дополнительное время на их изучение. В программах Microsoft Front Page, Macromedia Dreamweaver оптимальный, удобный для работы интерфейс.

Четвертым критерием отбора программы стал объем создаваемого сайта, выраженный в килобайтах. В каждой из программ мы создали сайт из 9 страниц, на которых одинаковый фон, гиперссылки, текст, таблица и анимированная картинка. Результат представлен в таблице:

№ п/п Название программы Объем созданных сайтов

Macromedia Dreamweaver 4 63,8 КБ

Блокнот 63,9 КБ

Adobe Golive 74,8 КБ

Microsoft Front Page 78,9 КБ

Koala HTML 63,9 КБ

Web Weaver 97 63,9 КБ

CoffeCup HTML Editor 63,9 КБ

HotDog Professional 6 63,9 КБ

Страницы созданные в программах Adobe GoLive и Front Page – являются самыми объемными и тяжелыми по весу, что является отрицательным моментом. Остальные программы имеют одинаковый результат, а в программе Macromedia Dremweaver сайт на 0,10 легче всех остальных редакторов, что является самым лучшим результатом.

После работы в редакторах пятым критерием отбора мы рассмотрели присутствие в программах функции предварительного просмотра создаваемого продукта. Выявилось, что у всех кроме Web Weaver присутствует такая функция. Что можно отнести к минусам этой программы.

Еще одним критерием стало: можно ли работать в программе сразу с несколькими страницами одновременно. Создавая мини-сайты, мы увидели, что в программах Microsoft Front Page и Web Weaver нельзя одновременно работать с двумя или более документами в этой программе, он открывает все документы в одном окне. В остальных программах существует возможность работать одновременно с несколькими страницами создаваемого сайта.

Скорость загрузки страниц мини-сайтов через Internet Explorer стало седьмым рассматриваемым критерием:

№ п/п Название программы Скорость загрузки страницы

Macromedia Dreamweaver 4 1,5 сек.

Web Weaver 97 1,5 сек.

Koala HTML 2 сек.

Adobe Golive 3 сек.

HotDog Professional 6 3 сек.

Блокнот 4 сек.

CoffeCup HTML Editor 4 сек.

Microsoft Front Page 10 сек.

Из результатов видно, что одинаковый и лучший результат у редакторов Блокнот, Macromedia Dreamweaver всего 1,5 секунды. От 2 до 4 секунд затратили редакторы Koala HTML, Adobe Golive, HotDog Professional 6, Блокнот, CoffeCup HTML Editor. Больше всего времени на загрузку затрачивает редактор Microsoft Front Page.

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

WYSIWYDОбъем программы Интерфейс Мини-сайт Предварит. возможность Загрузка в

G программы Просмотр работы в браузере программе с несколькими страницами одновременно

Блокнот - 52 КБ 2 63,9 КБ - + 4

Koala HTML - 2. 98 МБ 2 63,9 КБ + + 2

Web Weaver 97 - 5. 04 МБ 2 63,9 КБ - - 1,5

CoffeCup HTML Editor - 10. 3 МБ 2 63,9 КБ + + 4

HotDog Professional 6 - 21. 4 MБ 2 63,9 КБ + + 3

Macromedia Dreamweaver 4 + 89,5 МБ 1 63,8 КБ + + 1,5

Microsoft FrontPage + ~ 200 МБ 1 78,9 + - 10

Adobe Golive + 296 МБ 3 74,8 + + 3

Программа Macromedia Dreamweaver 4 имеет лучшие результаты по всем критериям отбора.

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

У каждого из редакторов есть достоинства и недостатки. Adobe Golive хорошо работает с другими продуктами Adobe, Macromedia Dreamweaver сотрудничает с другими продуктами Macromedia, Microsoft Front Page, Блокнот являются программными средства офиса. Создание сайта с помощью Блокнота, HotDog, Koala HTML, Coffee Cup, Web Weaver доступны профессионалу, а с появлением визуальных программ необходимость набирать весь документ в ручную с помощью HTML кодов становится неактуальным, даже не смотря на то, что они быстро загружаются. У них, на наш взгляд, не удобный для работы интерфейс, на что в первую очередь смотрят новички-создатели Web-страниц, это очень важный момент при работе в редакторе. Поэтому мы считаем их не удобными для создания Web-сайтов. Программа GoLive занимает много времени на изучение – все-таки очень сложная программа. Microsoft Front Page – приложение на основе шаблонов, мастеров, созданный продукт получается стандартным, без своего индивидуального дизайна. Также недостатком можно отметить, что редактор очень сильно зависит от собственных расширений.

Для нас оптимальным подходом является режим «двойного окна» Macromedia Dreamweaver, где сверху исходный код, а снизу – результирующая страница. Создание станиц сопровождает минимальное количество панелей инструментов на экране, и имеет дружественный интерфейс. Очень важно – иметь быстрый доступ к часто используемым функциям. Программа и создаваемый продукт оптимальны по весовым качествам занимаемых оперативной памяти компьютера.

На основании изложенного материала и практическим путем мы пришли к выводу, что Macromedia Dreamweaver является лидером среди инструментария для создания Web-сайтов, но у каждого, кто берется за создание сайта, свои цели, а разным целям соответствуют разные средства.