Tarkvara veebilehtede koostamise õpetamiseks vene ... · Поэтому для сравнения, в числе прочих, взяты два русскоязычных редактора

Tallinna Ülikool

Matemaatika-loodus teaduskond

Informaatika osakond

Tarkvara veebilehtede koostamise õpetamiseks vene õppekeelega

koolisSeminaritöö

Koostaja: Nadežda Sõrovarova

Juhendaja: Inga Petuhhov

Tallinn 2006

Содержание 1 HTML-РЕДАКТОРЫ ................................................................................................................4 2 Создание Web-сайтов.................................................................................................................5 3 Описание HTML-редакторов....................................................................................................7

3.1 Macromedia Dreamweaver MX 2004.................................................................................7 3.2 CatsHtml 2.0 Свобода .......................................................................................................8 3.3 Smart Web Builder..............................................................................................................8 3.4 Квикер 0.01........................................................................................................................8

4 Сравнение HTML-редакторов .................................................................................................9 4.1 Установка...........................................................................................................................9

4.1.1 Macromedia Dreamweaver MX 2004..........................................................................9 4.1.2 CatsHtml 2.0 Свобода ................................................................................................9 4.1.3 Smart Web Builder.....................................................................................................10 4.1.4 Квикер 0.01................................................................................................................10

4.2 Вешний вид, функции, HTML код.................................................................................10 4.2.1 Macromedia Dreamweaver MX 2004........................................................................11 4.2.2 CatsHtml 2.0 Свобода ..............................................................................................12 4.2.3 Smart Web Builder.....................................................................................................13 4.2.4 Квикер 0.01................................................................................................................14

4.3 Соответствие HTML стандарту.....................................................................................15 4.3.1 Macromedia Dreamweaver MX 2004........................................................................15 4.3.2 CatsHtml 2.0 Свобода..............................................................................................15 4.3.3 Smart Web Builder.....................................................................................................16 4.3.4 Квикер 0.01................................................................................................................16 4.3.5 Вывод о соответствии HTML стандарту................................................................16

5 Вывод........................................................................................................................................18 6 Заключение...............................................................................................................................20Список используемой литературы:............................................................................................21

Введение

Тема этой работы «Программное обеспечение для обучения в русскоязычных школах

созданию web-страниц» («Tarkvara veebilehtede koostamise õpetamiseks vene õppekeelega

koolis») выбрана автором потому, что во многих школах преподование информатики

поставлено на достаточно высокий уровень. Школьники хорошо владеют компьютером на

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

принципам создания собственных сайтов. Автор считает, что такие знания пригодятся

ученикам как для учебы в школе, так и в будущем.

Во время учебы ученики смогут размещать информацию о себе, свои школьные работы в

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

профессиональными разработчиками сайтов. Например, в Таллиннской Мустамяэской

Реальной гимназии делается акцент на изучении информатики. Там у учеников, которые

интересуются компьютерами, есть возможность, помимо школьной программы,

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

основам программирования, в частности созданию собственного сайта. Программу

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

увидеть планировку уроков в интернете, но эту возможность имеют только школьники и

учителя, так как для входа в систему нужно иметь пароль.

Цель этой работы найти наиболее подходящие HTML-редакторы для

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

русскоязычных редактора. Автор выбрала наиболее известные и легко доступные

редакторы. Выбранные редакторы: Macromedia Dreamweaver MX 2004, CatsHtml 2.0

Свобода, Smart Web Builder и Квикер 0.01.

Работа начинается с определения, что такое HTML-редактор, описание

разновидностей HTML-редакторов. Затем идут принципы оформления web-страниц и

построения сайта. Далее следует краткое описание выбранных для сравнения редакторов.

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

удобство использования, правильность написания HTML-кода, соответствие кода HTML

стандарту. После этого делается вывод о том, какие редакторы наиболее подходят для

использования учениками русских школ.

3

1 HTML-РЕДАКТОРЫ HTML-редактор - это программа, с помощью которой создаются HTML-документы, то

есть WEB-страницы. В настоящее время существуют редакторы двух типов: WYSIWYG-

редакторы и редакторы тегов. К этому можно добавить, что большинство современных

текстовых редакторов умеют сохранять документы в формате HTML.

WYSIWYG-редакторы - это программы, с помощью которых можно создавать

страницы, не имея никакого понятия о языке HTML, что является одним из основных

плюсов этих редакторов (What You See Is What You Get - что видишь, то и получаешь). Так

же эти редакторы сами создают CSS.

Недостатком WYSIWYG-редакторов является громоздкость созданных с их помощью

HTML-документов. Это получается оттого, что WYSIWYG-редакторы вставляют HTML-

коды "на все случаи жизни". В результате объем документа, а значит и время загрузки

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

месте, то есть пробеле, необходимо передать информацию, а значит затратить какое-то

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

интерпретацией в различных браузерах. То есть в одном из браузеров кнопка может быть

внизу страницы, в другом по центру.

Второй вид HTML-редактороров - редакторы тегов. При работе с ними видно

непосредственно HTML-код документа, можно оперативно изменять его, контролируя

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

документ получается более компактным и изящным. Но для этого пользователь должен

знать язык HTML, а при создании сложных сайтов еще и CSS.

Часто создаются редакторы, где пользователь может работать как в визуальном

режиме, так и писать код вручную. Это очень удобно, так как значительно упрощает

работу создателя сайта, но код при этом получается без лишних вставок. [1]

4

2 Создание Web-сайтовСамые лучшие Web-сайты — это те, которые привлекательно выглядят, емко выражают

основную идею и не заставляют пользователей ждать получения информации на их

экранах слишком долго. Основные принципы оформления web-страниц и построения

сайта [2]:

1. 5-7 пунктов меню - это предел для хорошего восприятия содержащейся в меню

информации.

2. дизайн первой страницы должен чуть-чуть отличатся от всех остальных страниц.

3. бегущие строки лучше не использовать или использовать, но крайне редко. Если

таких строк много, то это мешает восприятию информации

4. в web-страницах используются только форматы JPG, JPEG и GIF(для графических

изображений).

5. важно разумно организовать навигацию сайта. У посетителя должна быть

возможность легко попасть из одной точки сайта в другую.

6. необходимо разбивать большое количество информации.

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

8. необходимо избавлятся от горизонтальных прокруток экрана.

9. цвет ссылки не должен быть схожим с фоном страницы. Если, например, фон

страницы темно-красный, а цвет ссылки синий, то стоит посетителю просмотреть

ссылку как она становится темно-красной и исчезает. Так случается, если при

написании кода не указать какого цвета должна стать ссылка после нажатия.

10. важно делать страницы, которые доступны всем читателям вне зависимости от

того, каким браузером, платформой или экраном они решили или вынуждены

пользоваться.

11. на первой странице сайта должна находиться краткая информация о содержании

сайта, представленных материалах, авторах сайта. Посетитель, случайно попавший

на сайт, не должен гадать, что он может на нем найти.

12. крайне желательно, чтобы графика на сайте имела лишь вспомогательное значение

(за исключением, конечно, сайтов, посвященных изобразительному искусству и

другим подобным тематикам). Многие пользователи отключают отображение

графики в своих броузерах для ускорения путешествий по Интернету.

13. не желательно использовать на сайте текст, набранный заглавными буквами.

14. надо четко сформулировать назначение сайта. Постараться формулировать цели

настолько четко, насколько это возможно.

5

15. обязательно думать о своей аудитории. Кто будет основной (и вторичной)

аудиторией сайта? Какого они возраста? Чем они занимаются? Сколько времени

они проводят на сайте? В отношении каждой порции информации, каждой

картинки и каждой детали надо спрашивать себя, как отреагирует на это аудитория

сайта.

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

17. разумно организовать содержимое. Существует утверждение, что содержание

первично, а форма вторична. И это правда, но форма подачи содержания тоже

важна. Если есть информация, которую посетители должны увидеть, не надо ее

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

доступной, насколько это возможно.

18. тщательно протестировать сайт. Существует целый ряд различных браузеров, и в

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

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

помещенная в угол страницы, в каком-нибудь браузере оказывается посреди окна.

Опытные Web-дизайнеры проверяют в своих сайтах каждую страницу и каждую

ссылку в нескольких различных браузерах. Так же необходимо проверить сайт на

валидаторе. Валидатор контролирует насколько сайт соответствует HTML

стандарту, находит ошибки в HTML коде и предлагает возможные пути для их

исправления.

6

3 Описание HTML-редакторов

Автор выбрала для описания и сравнения следующие HTML-редакторы: Macromedia

Dreamweaver MX 2004, CatsHtml 2.0 Свобода, Smart Web Builder и Квикер 0.01.

Macromedia Dreamweaver MX 2004 выбран как довольно известный и достаточно

распростроненный редактор. Так как автор ищет редактор для использования в русских

школах, то она взяла так же CatsHtml 2.0 Свобода, Smart Web Builder и Квикер 0.01,

потому что эти редакторы во-первых относятся к свободно распространяемому

обеспечению, а во-вторых созданны на русском язаке. Smart Web Builder позволяет

выбирать русский или английский язык использования.

3.1 Macromedia Dreamweaver MX 2004

Macromedia DreamWeaver - профессиональный редактор HTML для визуального создания

и управления сайтами различной сложности и страницами сети Internet. Этот редактор

подходит как для тех, кто пишет код вручную, так и для тех, кто предпочитает работать в

визуальной среде.

Dreamweaver включает в себя много инструментов и средств для редактирования и

создания профессионального сайта: HTML, CSS, JavaScript, редакторы кода (просмотр

кода и инспектор кода), что позволяет редактировать различные текстовые документы,

которые поддерживаются в Dreamweaver. Также можно настроить Dreamweaver, чтобы он

наводил порядок и переформатировал HTML по желанию разработчика.

Возможность визуального редактирования в Dreamweaver также позволяет быстро

создавать или менять дизайн проекта без написания кода. Dreamweaver относится к так

называемым "визуальным" редакторам, т.е. сразу можно видеть на экране (хотя бы

приблизительно) результат работы. При этом он предоставляет полный доступ к

источнику кода. [2, 3, 4, 5]

7

3.2 CatsHtml 2.0 Свобода

Российский свободно распространяемый html-редактор, который является аналогом

FrontPage, в тоже время CatsHtml вобрал в себя некоторые качества HomeSite. Включает в

себя множество инструментов для создания web сайта. Так же содержит мастеров для

упрощения работы: имеются мастер вставки шаблонов страниц и скриптов

(спецэффектов). На сайте фирмы разработчика можно найти руководства по

использованию программы, а так же многочисленные шаблоны, скрипты, справки. [6]

3.3 Smart Web Builder

Свободно распространяемый html-редактор, среда разработки для программиста и Web-

мастера. Содержит многодокументовый интерфейс, подсветку языков программирования,

быструю вставку основных тегов html, инспектор проектов, а так же множество других

функций. При этом проект находится в постоянном совершенствовании. На сайте фирмы

разработчика выкладываются свежие версии программы, с описанием того, что

добавленно и улучшено в новой версии. Очень удобен тем, что дает возможность

пользователю выбирать язык использования: русский или английский. [7]

3.4 Квикер 0.01

Маленький русский универсальный редактор, созданный для удобного редактирования

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

обеспечению. Создатели этого редактора не ставили себе целью вобрать в этот редактор

все возможные функции, цель авторов создать редактор, который занимает не много

памяти на диске, при этом содержит все необходимые функции. К функциям этого

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

ключевые слова 20 самых распространенных форматов, включая HTML, CSS, Pascal и др.,

экспортировать данные с подсветкой в HTML и RTF. Так же Квикер 0.01 знает 5 основных

кодировок . [8]

8

4 Сравнение HTML-редакторов

Автор сравнивает выбранные редакторы по следующим параметрам: легкость установки,

удобство использования, правильность и удобство написания html кода. Автор считает,

что эти параметры очень важно учитывать при выборе редактора для обучения

школьников. Так как ученики могут быть не очень опытные пользователи компьютера, то

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

очень важно, чтобы эта программа была удобна и легка в использовании. Что бы

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

писать код, не вставляя ничего лишнего. Если же-редактор тэгов, то автор будет

рассматривать инструменты для вставки тэгов. Для того, что бы сравнить программы,

автор вначале сама установила эти редакторы, затем создавала одинаковую страничку в

каждом из них. На основе этого опыта будет сделан вывод о том, какие редакторы, по

мнению автора, наиболее подходит для обучения детей в русских школах.

4.1 Установка

4.1.1 Macromedia Dreamweaver MX 2004

Бесплатно скачать можно только 30-дневную demo версию. Сама программа стоит не

меньше 3000 крон. Найти сайт с которого можно скачать demo версию достаточно легко,

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

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

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

установкой программы тоже не возкает никаких трудностей. При установке каждый шаг

описывается, правда на английском языке, но в Инернете можно найти руководство по

установке и на русском. Программа занимает на диске 49980 Кб памяти.

4.1.2 CatsHtml 2.0 Свобода

Полностью бесплатная программа. Относится к свободно распространяемому

обеспечению. Легко найти в Интернете используя русские поисковые системы,

достаточно ввести «бесплатный русский HTML-редактор». А вот с установкой могут

возникнуть трудности. Когда автор устанавливала эту программу на компьютер с

англоязычной версией Windows, возникла проблема с кодировкой. То есть, программа

написана полностью на русском языке и при установке вместо нормального текста

появились непонятные значки. После того, как автор сделала так, что англоязычный

Windows стал поддерживать русский язык, текст стал читаемым, но ни одна из функций

9

программы не работала. Когда автор попробовала установить эту программу на компьютер

с русскоязычной версией Windows, никаких проблем с языком не возникло. При

установке был подробно описан каждый шаг. Сама программа тоже прекрасно работала.

Программа содержит очень хорошее руководство по использованию, где каждая функция

программы подробно описана. Там же можно найти небольшой учебник по HTML.

Занимает на диске 3900 Кб памяти.

4.1.3 Smart Web Builder

Тоже свободно распростроняемый HTML-редактор, который легко можно скачать из

Интернета. Домашняя страничка этого редактора сделана на 2 языках: английском и

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

начиная от самой первой до самой последней. С этого же сайта можно скачать все

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

английском язаке. При использовании русского с англоязычной версией Windows

возникают такие же трудности как и с CatsHtml 2.0 Свобода. Руководство по

использованию также на 2 языках, написанно достаточно подпобно. Самая последняя

версия программы занимает на диске 1.367 MB памяти.

4.1.4 Квикер 0.01

Бесплатный русскоязычный HTML-редактор. Можно скачать из Интернета. При

установке возникает такая же проблема, как и с CatsHtml 2.0 Свобода. Когда автор

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

проблема с кодировкой. Но в отличие от CatsHtml 2.0 Свобода, после того, как Windows

стал поддерживать русский язык, больше сложкостей не возникало. Все функции

программы стали хорошо работать. У редактора нет никакого справочника или

руководства по использованию, только небольшое описание, из которого можно узнать

название программы и имя автора. Программа занимает на диске 508 кб памяти.

4.2 Вешний вид, функции, HTML код

Сравнение редакторов, для того, что бы сравнить их внешний вид, функции и удобство

написания html кода, проходило следующиим образом:

1. автор создавала одну и ту же страничку в каждом из этих редакторов, при этом

анализируя, как та или иная функция, то или иное место расположения

инструментов влияет на удобство работы с программой;

2. в случае с WYSIWYG редактором, проверялось правильность написания кода;

10

3. автор учитывала уровень подготовки у школьников, насколько удобно будет им

пользоваться тем или иным редактором.(Например: знание английского языка. При

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

англоязычного редактора);

При построении странички автор использовала следующие элементы:

• заголовки различных уровней

• ссылки

• картинки

• текст

• меню

• различные цвета из палитры

• таблица

Автор выбрала эти элементы как наиболее используемые при создании простейшей web

странички. Школьникам, которые только учатся создавать сайты, будут использовать, в

основном, набор этих элементов.


Внешний вид программы выдержан в достаточно строгом стиле(см. Приложение 1).

Минимальное количество кнопок, спокойные светлые тона. Этот редактор можно

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

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

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

код сам. Большой плюс Macromedia Dreamweaver MX 2004 в том, что при написании кода,

эта программа не вставляет ничего лишнего. Код получается достаточно компактным и

изящным. Если писать код вручную, то Macromedia Dreamweaver MX 2004 предоставляет

множество возможностей для упрощения работы создателя. Автор создавала одну и туже

страничку в разных редакторах(см. Приложение 5). Этот редактор был очень удобен

именно тем, что можно было использовать оба режима. Так же содержит множество

функций, что делает эту программу очень полезной для опытного пользователя, так как

значительно облегчает работу по созданию сайта, но для школьников эти функции

лишнии, так как не нужны для создания простой web-странички. Например: пользователь

хочет вставить поле для введения текста. Программа открывает таблицу (см. рисунок 1)

11

Рисунок 1 Диалоговое окно для обозначения атрибутов при вставке поля для ввода текста.

Так как не все школьники владеют английским языком достаточно хорошо, то некоторые

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

ситуации возникают при вставке форм, таблиц, а так же других объектов HTML языка.

Такое обилие функций будет мешать ученикам освоить эту программу, так как им трудно

будет выделить и запомнить, из этого множества, самое основное. На взгляд автора, у

школьников могут возникнуть трудности с освоением этого редактора даже не смотря на

русскоязычный справочник и помощь учителя.


Дизайн этой программы значительно отличается от остальных трех, большим количеством

рисунков(см. Приложение 2). Этот редактор-редактор тэгов. Обладает огромным набором

различных инструментов, но в отличие от Macromedia Dreamweaver MX 2004, программа

устроена достаточно просто, школьники легко смогут разобраться с ней. CatsHtml 2.0

Свобода, как и Smart Web Buider с Квикер 0.01, содержит меню для вставки форм,

редактирования текста и т.д (см. рисунок 2)

Рисунок 2 Меню программы CatsHtml 2.0 Свобода

12

От этих двух программ меню CatsHtml 2.0 Свобода отличает возможность вызвать

справку по каждой из вкладок. В справке очень хорошо и подробно описан каждый из

инструментов этой вкладки. Так же удобно меню под названием «Инструменты» (см.

рисунок 3).

Рисунок 3 Меню «Инструменты»

В этом меню содержатся практически всё необходимое для создания web-странички.

Таким образом, хоть этот редактор и не относится к WYSIWYG, он значительно облегчает

работу создателя web-сайта. С помощью этой программы даже пользователь плохо

знающий язык html, сможет написать код корректно. По мнению автора, этот редактор

подойдет как и начинающим(просто и логично устроен), так и тем, кто хочет создавать

более сложные сайты(много инструментов).


Интерфейс программы выдержан в спокойных светлых тонах, немного больше кнопок,

чем в интерфейсе Macromedia Dreamweaver MX 2004(см. Приложение 3). Smart Web

Buider- редактор тэгов, то есть код надо писать вручную. Имеется возможность

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

написанный код. При создании нового документа спрашивается, какой тип документа

пользователь желает создать. При выборе «html» программа генерирует шаблон, основу

любого html документа (см. рисунок 4).

Рисунок 4 Шаблон для написания HTML кода

Пользователю останется лишь заполнить шаблон. Для этого существует удобно сделанное

меню для вставки тэгов (см. рисунок 5).

13

Рисунок 5 Меню для вставки тэгов

Меню состоит из заголовков, например «Таблица», «Текст». Пользователь выбирает

подходящий заголовок, появляются тэги связянные с этим разделом. Эта функция дает

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

для ввода текста, списков и т.д (см. рисунок 6).

Рисунок 6 Меню для вставки кнопок

Всего перечисленного достаточно для обучения школьников созданию собственной web-

странички. Так же как и с предыдущем редактором, с помощью Smart Web Buider писать

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

устроена очень разумно, ученики легко смогут освоить этот html редактор.

4.2.4 Квикер 0.01

Внешний вид этого редактора по цветовому решению схож с дизайном Smart Web Buider и

Macromedia Dreamweaver MX 2004(см. Приложение 4). Квикер 0.01-редактор тэгов, то

есть код надо писать вручную, так же есть возможность просматривать написанное в

визуальной части редактора. Эта программа устроена достаточно просто, содержит только

самые необходимые инструменты. В этом немного схожа со Smart Web Buider. Очень

похожее меню для вставки таблиц, редакторования текста и т.д (см. рисунок 7).

Рисунок 7 Меню программы Квикер 0.01

14

Не смотря на внешнею схожесть, меню Smart Web Buider намного удобнее и содержит

больше инструментов. На пример, в Квикер 0.01, нет специального меню для вставки

различных кнопок, форм для написания текста и т.д., это может создать дополнительные

сложности для обучающегося. Ученики могут не помнить, как именно пишется тот или

иной тэг. В случае с другими редакторами, можно найти необходимый тэг в меню, Квикер

0.01 не дает такой возможности. Это может затруднить работу учащегося. На взгляд

автора, в этом редакторе содержится мало различных инструментов. С одной стороны, это

плюс, так как у школьников не возникнет проблем с освоением этой программы. Но с

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

языком html, возможностей этого редактора будет не хватать.

4.3 Соответствие HTML стандарту

Автор проверила созданные в описываемых редакторах странички на валидаторе

(http://validator.w3.org/) для того, что бы сделать вывод о том, насколько они соответствуют

стандарту.


В случае с Macromedia Dreamweaver MX 2004 валидатор не показал ни одной ошибки.


При проверке странички созданной в этом HTML редакторе, валидатор нашел 1 ошибку

(см. приложение 9):

Не указан тип документа. CatsHtml2.0 действительно не вставляет строку с указанием

типа документа при генерировании HTML шаблона. То есть код начинается сразу с тэга

<html>. Для того, что бы валидатор смог проверить эту страничку, строку с указанием типа

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

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

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

документа лучше использовать для странички, созданной в этом редакторе. Автор решила

использовать типы документов генерируемые программами Smart Web Builder и

Macromedia Dreamweaver MX 2004. Используя тип документа из Smart Web Builder, автор

вставила следующею строку:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

15

http://validator.w3.org/

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

Это значит, что такой тип документа можно использовать для создания страничек в этой

программе.

После этого автор заменила этот тип документа, на

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

При проверке на валидаторе было найдено 11 ошибок, связаных с неправильным

использованием типа документа. Поэтому для странички созданной в этом редакторе

автор решила оставить <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0

Transitional//EN"> тип документа.


При проверке на валидаторе странички созданной в редакторе Smart Web Builder не было

найдено ни одной ошибки.

4.3.4 Квикер 0.01

При генерировании шаблона, этот редактор, так же как и CatsHtml2.0 Свобода, не

вставляет строку для указания типа документа (см.Приложение 11). Это делает его

значительно менее удобным для использования школьниками. Так же, как и для

CatsHtml2.0 Свобода, сюда хорошо подходит следующий тип документа <!DOCTYPE

HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">.

4.3.5 Вывод о соответствии HTML стандарту

Проверка страничек на валидаторе дала следующие результаты:

1. Редактор Macromedia Dreamweaver MX 2004 генерирует код, соответствующий

HTML стандарту.

2. Редактор CatsHtml2.0 Свобода не пишет тип документа, что не дает возможности

валидировать страничку, созданную в этом редакторе. После указания типа

документа, валидирование проходит успешно, HTML код соответствует стандарту

HTML 4.0 Transitional.

16

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd

3. Редактор Smart Web Builder, как и Macromedia Dreamweaver MX 2004, генерирует

код, соответствующий HTML стандарту.

4. Редактор Квикер 0.01, так же как и CatsHtml2.0 Свобода, не генерирует тип

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

валидирование прошло успешно. Большую часть кода автор писала вручную,

поэтому нельзя утверждать, что этот редактор генерирует код соответствующий

или не соответствующий стандарту. В случае с этой программой, валидатор

контролирует работу автора.

В разделе 4.2 “Внешний вид, функции, HTML код” уже говорилось о том, насколько

функциональны сравнивыемаи редакторы. Сравнение редакторов на соответствие HTML

стандарту дополняет картину. Редакторы Smart Web Builder и Macromedia Dreamweaver

MX 2004 генерируют гораздо более удобный шаблон для написания HTML кода. Из-за

того, что редакторы Квикер 0.01 и CatsHtml2.0 Свобода не указывают тип документа, у

учеников могут возникнуть трудности с валидированием, а затем с просмотром странички

в броузере. Так же неудобство Квикер 0.01 состоит в том, что в этой программе очень

мало тэгов для вставки. При создании странички в этом редакторе, большую часть тэгов

автор писала вручную. Для школьников, плохо знакомых с языком HTML, это может

создать дополнительные трудности.

17

5 Вывод

Автор сравнивала 4 html-редактора, Macromedia Dreamweaver MX 2004, CatsHtml 2.0

Свобода, Smart Web Builder и Квикер 0.01, для того, что бы сделать вывод о том, какие из

этих редакторов больше подходят для обучения учеников русских школ созданию web-

странички. Для этого автор сама создавала в каждом из этих редакторов страничку,

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

использования, правильность и удобство написания html кода, соответствие html кода html

стандарту. После чего автором был сделан вывод о том, что наиболее подходящие html-

редакторы-это CatsHtml 2.0 Свобода и Smart Web Builder. Причины, по которым автор

сделала такой вывод:

1. Обе эти программы относятся к свободно распростроняемому обеспечению, то

есть, их можно бесплатно скачать из Интернета. В отличие от программы

Macromedia Dreamweaver MX 2004, которую надо покупать.

2. CatsHtml 2.0 Свобода и Smart Web Builder редакторы поддерживающие русский

язык, это параметр очень важен, так как редактор предназначается для учеников

русских школ. Macromedia Dreamweaver MX 2004 используется только на

английском. Квикер 0.01 так же русскоязычный редактор, но при этом обладает

небольшим набором инструментов.

3. CatsHtml 2.0 Свобода и Smart Web Builder обладают большим набором

инмтрументов для создания web сайта. Macromedia Dreamweaver MX 2004 так же

включает в себя множество инструментов, но при этом эта программа более сложно

устроена.

4. CatsHtml 2.0 Свобода и Smart Web Builder устроены достаточно просто, то есть у

школьников не должно возникнуть проблем с освоением этих редакторов.

Из этих двух редакторов, автор наиболее подходящим считает Smart Web Builder, так как

при установке этого редактора не возникает никаких трудностей. При установке CatsHtml

2.0 Свобода могут возникнуть проблемы с кодировкой. Программа Smart Web Builder сама

указывает тип документа, в CatsHtml 2.0 Свобода нет такой функции. Так же, большой

плюс по мнению автора то, что Smart Web Builder может быть использованна как на

русском, так и на английском языках. Так как при создании сайта все тэги пишутся на

английском языке, то школьникам будет очень полезно привыкать к англоязычному html

18

редактру. Возможен такой вариант: обучение начинается используя русскую версию Smart

Web Builder, и когда ученики освоят эту программу, начать использовать английскую

версию. Таким образом школьники хорошо усвоят материал, так как он преподнесен на

родном языке, затем научатся работать с англоязычной версией.

19

6 ЗаключениеЦель этой работы заключалась в том, что бы выбрать из 4 редакторов: Macromedia

Dreamweaver MX 2004, CatsHtml 2.0 Свобода, Smart Web Builder и Квикер 0.01 наиболее

подходящие для обучения учеников русских школ. Для этого автор установила на

компьютер каждый из этих редакторов и создала в каждом из них одинаковую web

страничку. Это делалось для того, что бы выяснить насколько эти программы легко

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

написании html кода, насколько код соответствует html стандарту. В результате, автор

сделала вывод о том, что наиболее подходящие-это CatsHtml 2.0 Свобода и Smart Web

Builder, потому что эти редакторы содержат оптимальный набор параметров, необходимых

для обучения русскоязычных школьников. Это: легкодоступность, поддержка русского

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

кода. Из этих двух редакторов, автор отдает предпочтение Smart Web Builder, так как с

ним не возникает проблем с установкой, код, генерируемый этой программой

соответствует html стандарту, а так же эта программа поддерживает еще и английский

язык.

Безусловно, окончательный вывод о том, подходит ли Smart Web Builder для

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

только после того, как ученики и учителя попользуются этой программой некоторое

время. Тогда можно будет сделать вывод о том, насколько этот редактор удобен для

обучения школьников.

20

Список используемой литературы:

1. Html редакторы [WWW]

http://subscribe.ru/archive/inet.webbuild.inetsite/200603/27211048.html (2.04.2006)

2. Лепешкин,А. Визуальный html редактор Dreamweaver. Разработка web дизайна. [WWW]

http :// ref . ewreka . ru / r 25257/ (12.04.2006)

3. Бандурина, Л. Руководство по Macromedia Dreamweaver для начинающих. [WWW]

http://webmaster.yartop.ru/desing/webe/webe4/webe4-01.html (1.05.2006)

4. Габитов, М. Выбираем html редакор [WWW]

http://www.3dnews.ru/software/html_editors/ (12.04.2006)

5. Экспертная оценка [WWW]

http://www.potrebitel.ru/index.phtml?action=model_item&mag_id=3&num_id=19&cat_id=163&gud_id=1826 (2.04.2006)

6. Оффициальный сайт Digitallords [WWW]

http://www.digitallords.nm.ru/ (1.05.2006)

7. Оффициальный сайт Smart Web Builder [WWW]

http://www.swbsite.com/ (15.06.2006)

8. Оффициальный сайт Квикер 0.01 [WWW]

http://www.text_editor.chat.ru/ (15.06.2006)

21

http://1.http://www.text_editor.chat.ru/

http://www.swbsite.com/

http://www.digitallords.nm.ru/

http://www.potrebitel.ru/index.phtml?action=model_item&mag_id=3&num_id=19&cat_id=163&gud_id=1826

http://www.potrebitel.ru/index.phtml?action=model_item&mag_id=3&num_id=19&cat_id=163&gud_id=1826

http://www.3dnews.ru/software/html_editors/

http://webmaster.yartop.ru/desing/webe/webe4/webe4-01.html

http://ref.ewreka.ru/r25257/

http://subscribe.ru/archive/inet.webbuild.inetsite/200603/27211048.html

Приложение 1Внешний вид Macromedia Dreamweaver MX 2004

22

Приложение 2

Внешний вид CatsHtml 2.0 Свобода

23


Внешний вид Smart Web Builder

24


Внешний вид Квикер 0.01

25


Созданная автором страничка для сравнения html редакторов

26


HTML код странички (Smart Web Builder)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

<link href="stiil.css" rel="stylesheet" type="text/css">

</head>

<body>

<h1>HTML redaktorid</h1>

<div id="navcontainer">

<ul id="navlist">

<li id="active"><a href="#" id="current">Smart Web Builder</a></li>

<li><a href="#">CatsHtml2.0</a></li>

<li><a href="#">Macromedia Dreamweaver</a></li>

<li><a href="#">Qviker 0.01</a></li>

</ul>

</div>

<h2>Redaktori kirjeldus</h2>

<h3>Macromedia Dreamweaver</h3>

<table cellpadding="6" style="width:40em;">

<tr><td>Dreamweaver 8 is the industry-leading <a href="#">web development tool</a>, enabling users to efficiently design, develop and maintain standards-based websites and applications.</td> </tr>

<tr>

<td><img src="macr.JPG" width="380" height="224" alt=””></td>

</tr>

</table>

</body>

</html>

27


HTML код странички (Macromedia Dreamweaver MX 2004)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Untitled Document</title>

<link href="stiil.css" rel="stylesheet" type="text/css"/>

</head>

<body>



<ul id="navlist">





</ul>

</div>



<table width="40 em" border="0" cellpadding="6">

<tr>

<td>Dreamweaver 8 is the industry-leading <a href="#">web development tool</a>, enabling users to efficiently design, develop and maintain standards-based websites and applications.</td>

</tr>

<tr>

28

<td><img src="macr.JPG" width="380" height="224" alt=””></td>

</tr>

</table>

</body>

</html>

29


HTML код странички (CatsHtml 2.0 Свобода)

<html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1251"><title></title><meta name="description" content=""><meta name="keywords" content=""><link href="stiil.css" rel="stylesheet" type="text/css"/></head> <body> <H1>HTML redaktorid</H1> <div id="navcontainer"> <ul id="navlist"> <li id="active"><a href="#" id="current">Smart Web Builder</a></li> <li><a href="#">CatsHtml2.0</a></li> <li><a href="#">Macromedia Dreamweaver</a></li> <li><a href="#">Qviker 0.01</a></li> </ul> </div> <H2>Redaktori kirjeldus</H2> <H3>Macromedia Dreamweaver</H3> <table border="0" cellpading="6" style="width: 40em;"> <tr> <td>Dreamweaver 8 is the industry-leading <a href="#">web development tool</a>, enabling users to efficiently design, develop and maintain standards-based websites and applications.</td> </tr> <tr> <td><img src="macr.JPG" width="380" height="224" alt=””></td> </tr> </table> </body></html>

30


Ошибки, найденные при проверке на валидаторе (CatsHtml 2.0 Свобода)

Error Line 2 column 0: no document type declaration; implying "<!DOCTYPE HTML SYSTEM>".

<html>

The checked page did not contain a document type ("DOCTYPE") declaration. The Validator has tried to validate

with a fallback DTD, but this is quite likely to be incorrect and will generate a large number of incorrect error

messages. It is highly recommended that you insert the proper DOCTYPE declaration in your document --

instructions for doing this are given above -- and it is necessary to have this declaration before the page can be

declared to be valid.

31


HTML код странички (Квикер 0.01)

<HTML>

<HEAD>

<TITLE> http://www.quicker.tk </TITLE>

<META NAME="Generator" CONTENT="Źāčźåš">

<link href="stiil.css" rel="stylesheet" type="text/css"/>

</HEAD>

<BODY>



<ul id="navlist">





</ul>

</div>



<TABLE BORDER="0" cellpadding="6" WIDTH="40 em">

<TR>

<TD>Dreamweaver 8 is the industry-leading <a href="#">web development tool</a>, enabling users to efficiently design, develop and maintain standards-based websites and applications.</TD>

</TR>

<TR>

<TD><img src="macr.JPG" width="380" height="224" alt=””></TD>

</TR>

32

</TABLE>

</BODY>

</HTML>

33


Ошибки, найденные при проверке на валидаторе (Квикер 0.01)

Error Line 2 column 0: no document type declaration; implying "<!DOCTYPE HTML SYSTEM>".

<html>

The checked page did not contain a document type ("DOCTYPE") declaration. The Validator has tried to

validate with a fallback DTD, but this is quite likely to be incorrect and will generate a large number of incorrect error messages. It is highly recommended that you insert the proper DOCTYPE declaration in your

document -- instructions for doing this are given above -- and it is necessary to have this declaration before the page can be declared to be valid.

34

Documents

Tarkvara veebilehtede koostamise õpetamiseks vene ... · Поэтому для сравнения, в числе прочих, взяты два русскоязычных редактора