Средства  разработки Web – страниц

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

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

     Существует  два способа технической  разработки Web-страниц. Первый из них – это открыть какой-либо текстовый файл и набрать в нем HTML код. Разумеется , здесь же можно использовать CSS,  Javascript, DHTML, Active-X , PHP и другие. Таким способом пользовались до появления специального ПО.

     Второй  способ - программные средства, которые имеют специальные встроенные компоненты для конвертирования данных, созданных в этих продуктах, в HTML формат. Например, программы широко используемого пакета MS Office, начиная с версии 97, позволяет сохранить документ в формате HTML. При этом сохраняются, насколько это возможно, особенности форматирования символов и абзацев, изображения, таблицы, списки и так далее. Многие современные графические редакторы предоставляют возможность сохранить коллекцию картинок в виде HTML-документа. Надо отметить, что при таком конвертировании исходный текст HTML-документа получается крайне избыточным и нуждается в коррекции.

     Третий способ – использовать некие программные средства для разработки Web-страниц. Этот способ разумеется легче, т.к. можно «видеть» то, что ты создаешь. Хотя, по–моему, для начинающего web-мастера было бы полезным сначала научиться  писать код « по - старинке », т.е. познать HTML, DHTML, Active-X, javascript и CSS, SQL , PHP на собственной шкуре. Примером такого программного обеспечения может служить Adobe Dreamweaver.

Современные требования, предъявляемые к web-редакторам, включают в себя:

• Поддержку каскадных таблиц стилей.
• Использование современных скриптовых языков, таких как JavaScript и т.д.
• Генерацию Dynamic HTML для различных браузеров.
• Средства наглядного дизайна: вставка изображений, таблиц и фреймов.
• Динамическое отображение создаваемой страницы в браузере.
• Шаблоны WWW-страниц или специальные программы - "мастера" по их созданию.
• Средства по управлению web-сайтом (создание файловой структуры сайта, отслеживание связей и проверка ссылок между страницами, публикация сайта в Интернет).

Существуют две  разновидности web-редакторов: визуальные и не визуальные.

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

     Визуальные  редакторы позволяют работать с  самой web-страницей "как она есть", в режиме WYSIWYG (What You See Is What You Get - То, что ты видишь, то и получаешь). Редактирование и форматирование текстов, вставка рисунков, таблиц, гиперссылок и других элементов происходит как в обычном текстовом редакторе, а сама программа формирует (генерирует) соответствующий HTML-код. Кроме средств визуального редактирования эти web-редакторы одновременно предоставляют доступ к получившемуся HTML-коду. Визуальные редакторы — отличная стартовая площадка для начинающих web-дизайнеров, плохо знакомых с HTML. Но и опытные дизайнеры часто пользуются визуальными редакторами, чтобы быстро "сверстать" web-страничку, а потом довести ее до ума вручную.

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

1) Свободно распространяемые (бесплатные). В основном это невизуальные html-редакторы, разработанные небольшой группой авторов. Визуальные редакторы этой группы имеют ограниченный набор средств визуального редактирования. Характеризуются небольшим объемом занимаемой памяти, а некоторые из них даже не требуют специальной установки.

2) Условно-бесплатные. Web-редакторы этой группы характеризуются  невысокой ценой – от 300 рублей.

3) Платные. В  эту группу входят невизуальные и визуальные редакторы, разработанные крупными фирмами. Отвечают всем требованиям, предъявляемым к современным web-редакторам. Накладывают определенные ограничения на ресурсы компьютера. Обычно имеются демо-версии продукта, которые можно установит бесплатно и работать с ними ограниченное время (30 дней).

Вообще при  разработке сайта можно выделить три основных этапа .

      Первый  этап. Создание дизайна сайта.

            На этом этапе  создается непосредственно дизайн сайта. Для этого не надо знание языка  разметки гипертекста, достаточно лишь обладать какой-нибудь фантазией. На этом этапе дизайнер сайта создает  его основу. Он также может и  придумать тот контент, что будет размещен на странице. А может лишь создать некие шаблоны.

      Второй  этап. Создание кода.

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

      Расскажу  немного о верстке HTML-страниц. Версткой веб-страниц будем называть создание такого HTML-кода, который позволяет размещать элементы веб-страницы (изображения, текст, линии и т.д.) в нужных местах документа и отображать их в окне браузера согласно разработанному макету. При этом следует принимать во внимание ограничения присущие HTML и CSS, учитывать особенности браузеров и знать приемы верстки, которые дают желаемый результат.

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

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

     Типографское  искусство или просто типографика — вот еще одна область, которая также относится к теме верстки. Это именно искусство, объединившее в себе черты дизайна и верстки, и основано оно на знании шрифтов, опыте их использования, психологии восприятия, чувстве стиля и т.д. Действительно, какой шрифт лучше выбрать, чтобы текст хорошо читался, легко воспринимался при изменении размера букв и делал сайт неповторимым? При подготовке полиграфических материалов ответ на этот вопрос возлагают на дизайнера, но при создании сайтов дизайнер и верстальщик, как правило, решают его сообща.

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

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

      Табличная верстка

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

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

      Верстка с помощью слоев

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

     Первоначально слои ввела компания Netscape, включив в свой браузер поддержку тега <LAYER>. Этот тег позволял прятать/показывать текущее содержимое, устанавливать положение относительно окна браузера, накладывать один слой поверх других и загружать данные в содержимое слоя из файла. Что характерно, все эти параметры легко менялись с помощью JavaScript и это расширяло возможности по созданию действительно динамического контента на странице. Несмотря на столь впечатляющий набор возможностей, тег <LAYER> не был включен в спецификацию HTML и так и остался лишь расширением браузера Netscape.

     Однако  необходимость в указанных возможностях, которые бы применялись на сайтах, уже назрела, и в конце 1996 года синтаксис для работы со слоями был  разработан и одобрен в рабочем  проекте консорциума «CSS Positioning (CSS-P)». Основная нагрузка ложилась на стили, с их помощью можно управлять видом любого элемента, в том числе менять значения динамически через JavaScript. К сожалению, объектные модели браузеров для доступа к элементам разнились, поэтому приходилось писать достаточно сложный код, который бы учитывал эти различия.

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

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

   Хак — это набор приемов, когда определенному браузеру «подсовывают» код, который понимается только этим браузером, а остальными игнорируется.

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

   Есть  и другой, перспективный путь — придерживаться спецификации CSS. Несмотря на то, что браузеры не в полной мере сами ее поддерживают, они прогрессируют именно в этом направлении. А именно, полной поддержки различных спецификаций (HTML, CSS, DOM). Таким образом, получается, что будущие версии браузеров будут унифицированы и один и тот же сайт станут отображать корректно.

   Снова вернемся к слоям. Понятно, что они  непосредственно связаны со стилями. Раз так, то не получается ли, что  каждый элемент HTML-кода, к которому добавляются стили, является слоем? В каком-то смысле так и есть. Однако это внесло бы изрядную путаницу, если вместо «таблица» или «параграф» мы бы говорили «слой». Поэтому договоримся  относить этот термин только к тегам  <DIV>.

   Слой — это элемент веб-страницы, созданный с помощью тега <DIV>, к которому применяется стилевое оформление.

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

   Разделение  содержимого и  оформления

     Код HTML должен содержать только теги разметки и теги логического форматирования, а любое оформление выносится  за пределы кода в стили. Такой  подход позволяет независимо управлять  видом элементов страницы и ее содержимым. Благодаря этому над  сайтом может работать несколько  человек, при этом каждый выполняет  свою функцию самостоятельно от других. Дизайнер, верстальщик и программист  работают над своими задачами автономно, снижая время на разработку сайта.

     Активное  применение тега DIV

     При использовании слоев существенное значение уделяется универсальному тегу <DIV>, который выполняет множество функций. Фактически это основа, на которую «навешиваются» стили, превращая ее то в игрушку, то в зверушку. Совершенно не значит, что применяется только один этот тег, нужно ведь и рисунки вставлять и оформлять текст. Но при верстке с помощью слоев тег <DIV> является кирпичиком верстки, ее базовым фундаментом.

     Благодаря этому тегу HTML-код распадается  на ряд четких наглядных блоков, за счет чего верстка слоями называется также блочной версткой. Код при этом получается более компактным, чем при табличной верстке, к тому же поисковые системы его лучше индексируют.

     Таблицы применяются только для представления  табличных данных

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

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

      Конечно, нельзя при создании современного сайта  обойтись без специализированного  программного обеспечения. HTML-документ, можно конвертировать из многих программ, (например, Microsoft Word). После конвертации одна страница текста может превратиться в огромный HTML-файл размером более 100кб. HTML-документ, можно создавать с помощью визуальных пакетов (WYSIWYG -What You See Is What You Get), таких, например, как Microsoft FrontPage. WYSIWYG-редакторы сами вырабатывают html-код документа, в то время как разработчик лишь выбирает нужные ему опции из меню. Разработчик сайта должен использовать разумное сочетание всех методов создания HTML-документов. При использовании этих методов следует учесть следующее:

• создание различных эффектов в простом текстовом редакторе - громоздкая и сложная задача;
• документ подготовленный с помощью какой-либо программы проще конвертировать, чем создавать заново;
• текстовые редакторы можно использовать для очистки от "мусора" HTML-документов, созданных с помощью специализированных программ;
• при создании эффектов с помощью специальных программ (например, Microsoft FrontPage) следует предусмотреть поддержку этих эффектов на web-сервере.

   Одним из лидеров в области разработки программного обеспечения для подготовки web-публикаций является компания Macromedia (http://www.macromedia.com). Очень популярны пакеты Macromedia: Dreamweaver, HomeSite (до версии 5 этот пакет выходил под названием Allaire HomeSite), а также специализированные пакеты для создания компьютерной графики и анимации.  
 
Создание графики для web заслуживает особого внимания . Следует иметь в виду, что графика бывает двух видов: растровой (когда описывается каждая точка изображения) и векторная (когда задается формула для генерации изображения). Последний способ построения графики более компактен и, в частности, идеально подходит для создания анимаций.

Расскажем поподробнее  о каждом из них.

Microsoft FrontPage

     WYSIWYG -редактор. Недостаток: автоматически вырабатываемый html-код документа, созданного разработчиком в визуальном режиме, как правило, неоптимален.

Macromedia Flash 5

     Технология  Flash становится очень популярной.  
Она позволяет создавать очень эффектные web-страницы, содержащие FLASH-объекты или исполняемые файлы, содержащие большое количество векторной графики, анимационные ролики. 
За счет применения векторной графики Flash-страницы быстрее загружаются на компьютеры клиента, чем традиционные (содержащие растровую графику) и одинаково воспринимаются на различных платформах: Windows, Macintosh, Solaris, Unix.

     Имеется возможность передачи данных из HTML-документа FLASH-объекту и наоборот, что позволяет создавать управляемые FLASH-объекты, а также делать более эффектными HTML-страницы (например, формы).

Macromedia Director 8

WYSIWYG-редактор. Профессиональное решение для web-дизайна и разработки web-сайтов.

• Имеет очень удобный, простой интерфейс (в стиле PageMaker/Illustrator/PhotoShop).
• Автоматизирует работу над проектом. Создаваемый код почти не отличается от написанного программистом.
• Содержит встроенные средства работы с графикой.
• Позволяет непосредственно внутри пакета создавать FLASH-анимации.
• Обеспечивает средства отладки JavaScript-сценариев для браузеров MS Internet Explorer и Netscape Navigator.
• Допускает расширение возможностей за счет дополнительных модулей. Библиотека дополнительных компонент (более 150) входят в комплект поставки
• при вводе кодов создает список значений тэгов и атрибутов в виде всплывающей подсказки

Macromedia Fireworks 3

Профессиональное  приложение для создания графических  изображений и их размещения в  Интернет.

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

Macromedia Dreamweaver 3 Fireworks 3 Studio 
Совместное использовании Dreamweaver 3 и Fireworks 3 сокращает время разработки за счет взаимной автоматизации повторяющихся действий.

Allaire HomeSite 4.5

Позволяет легко  и быстро создавать эффектные web-сайты 

• Имеет удобный интуитивно понятный интерфейс, богатую палитру инструментов
• Содержит средства контроля качества: проверку синтаксиса html-кода, верификацию ссылок

НОВОСТЬ: Фирма Allaire несколько лет назад была поглощена компанией Macromedia. Известный продукт HomeSite теперь выходит под названием Macromedia HomeSite 4.5. (хотя название Allaire все еще присутствует на упаковке.)

Macromedia DreamWeaver UltraDev 4

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

• БД могут поддерживаться на различных серверных платформах.
• Достаточно просто создаются системы электронной коммерции, такие как электронные витрины, системы регистрации клиентов.

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

Macromedia ColdFusion 4.5. UltraDev 4 Studio

Объединение среды  разработки ColdFusion Studio и среды DreamWeaver UltraDev. 
Содержит мощные инструменты визуальной разработки приложений для размещения на платформе ColdFusion Server 5, визуального представления серверного источника данных (набора записей, переменной, директория и пр.), средства отладки сценариев.

Adobe PhotoShop 6

Мировой стандарт обработки изображений как для печати, так и для web

      До  появления Интернет компьютеры использовались лишь для обработки информации (главным образом, для вычислений); результаты расчетов переносились на внешние носители (чаще всего, на бумагу). Благодаря Интернет и, прежде всего, основной ее компоненте, - World Wide Web, компьютеры становятся средством связи. 
 
Современные web-технологии представляют широчайшие возможности для публикации информации. WWW - одно из самых демократичных средств массовой информации: правом размещать в Web свою информацию в равной степени пользуются и правительственные организации, и крупные фирмы, и частные лица. Информация, опубликованная в WWW, не подвергается цензуре.  
 
Web-технология применяется не только в Интернет, но и для обеспечения информационной поддержки работы различных подразделений в рамках одной организации (intra-сети, intranet). Intranet существенно облегчают процесс создания, хранения и поиска документов, позволяют не только усовершенствовать делопроизводство, но и качественно изменить весь процесс управления предприятием.  
 
Очевидно, что наибольшее влияние развитие web-технологий имеет на те сферы общественной деятельности, которые непосредственно связаны с управлением информационными потоками, с передачей и обработкой информации, с визуализацией данных, полученных в результате вычислений. 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

     Министерство  образования и науки РФ

     Казанский государственный  архитектурно-строительный университет

     Кафедра информационных систем и технологий 
 
 
 

     Реферат

     Средства  разработки web – страниц 
 
 
 
 
 
 

     Выполнил:

     Студент группы 23-301

     Разумов Т.В.

     Проверил:

     Нотариус  А.А. 
 
 

     Казань 2010