Geum.ru

Text Transfer Protocol протокол передачи гипертекста. Когда запускатеся программа

Вид материалаПрограмма

Содержание


Обзор редакторов для верстки веб-страниц
Визуальные редакторы
Adobe GoLive и LiveMotion
Основы работы с FrontPage 2000
Текстовые редакторы
О программе Macromedia DreamWeaver MX
Рабочее окно программы
Macromedia DreamWeaver MX. Вводная часть1
Форматы файлов компьютерной графики
Macromedia Flash
Macromedia Fireworks
Растровая графика
Форматы файлов растровой графики
Формат GIF
Формат JPEG
Формат PNG
Формат PNG
Подобный материал:
1   2   3   4   5   6

Обзор редакторов для верстки веб-страниц


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

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

Редакторы для верстки веб-страниц бываю двух типов: визуальные и текстовые.

Визуальные редакторы не требуют от вас знаний html, css и прочих технологий для разметки страниц. В визуальном редакторе вы располагаете различные элементы вашего сайта, как будто на листе бумаги, а редактор пишет за вас код самостоятельно. Именно поэтому визуальные редакторы еще называют WYSIWYG-редакторами. Аббревиатура WYSIWYG расшифровывается как What You See Is What You Get - что видишь, то и получаешь.

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

Какого же типа вам следует заводить редактор? Если вы изучаете html, css или другие технологии для разметки страниц, если вы хотите уметь создавать качественные страницы и быть профессиональным кодером, то безусловно вам нужен текстовой редактор. Если же у вас нет времени на изучение html, css и прочих технологий, если перед вами не стоит очень сложных задач в выполнении страницы, то смело заводите себе визуальный редактор и пользуйтесь им, он очень экономит время и силы. А лучше всего иметь у себя на компьютере и визуальный, и текстовой редакторы для разных нужд.

ВИЗУАЛЬНЫЕ РЕДАКТОРЫ

Macromedia Dreamweaver MX

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

Разработчики утверждают, что Macromedia Dreamweaver MX предназначена для проектирования, разработки и администрирования профессиональных web-сайтов и приложений. Кроме того Dreamweaver легко интегрируется с другими программами от Macromedia, например, такими, как Flash. Т.е. Dreamweaver гораздо больше, чем просто визуальный редактор, это достаточно мощный и сложный инструмент, а всякий сложный инструмент требует, чтобы на его освоение было потрачено какое-то время, прежде, чем пользователь сможет работать в нем. Однако, я считаю, что вас не должно смущать, что придется изучать, как пользоваться программой, Dreamweaver стоит того.


Adobe GoLive и LiveMotion

Возможно, Adobe GoLive понравится тем, кто любит программы от Adobe, и много с ними работал: знакомая среда, достаточно легко разобраться, что к чему. Кроме того, еще один плюс для любителей Adobe - все программы от Adobe прекрасно взаимодействуют друг с другом и дополняют друг друга, GoLive не исключение, он прекрасно дружит с собратьями. Однако, GoLive не более, чем визуальный редактор для верстки веб-страниц, больше чем поддержки таких технологий, как Html, Dhtml, CSS, XML и нескольких готовых " onclick="return false">
Хочу также добавить, что, вероятно, стоит использовать с GoLive такую программу, как Adobe LiveMotion (в предыдущих версиях она называлось Image Styler). Хотя, по идее, LiveMotion является графическим редактором, в котором вы можете создавать незатейливую, но качественную графику для своих веб-сайтов, эта программа также умеет верстать веб-странички, на основе того, что вы нарисовали (не лучшим образом, но довольно прилично, плюсом является то, что LiveMotion сам режет готовый макет на много картинок, которые вы потом можете использовать при верстке сайта в GoLive).


Microsoft FrontPage

Если верить разработчикам, то программа FrontPage позволяет создавать веб-узлы, обладающие широкими возможностями, а также предоставляет средства управления ими. На деле, FrontPage дружит с Html, Css, Dhtml, " onclick="return false">

Hotdog

Программа имеет простой и понятный пользователю интерфейс. Кроме того, что Hotdog дружит с пользователем, эта программа дружит также с Flash, SQL, PHP, ASP, имеет работать с GIF-изображениями (оптимизация, анимация), включает в себя Html-компрессор, может создавать файлы справки (CHM).



ТЕКСТОВЫЕ РЕДАКТОРЫ

Homesite

Этот редактор, пожалуй, самый популярный и мощный среди текстовых, и не зря. Кроме того, что в нем достаточно легко работать не только с Html-кодом (есть все, от списка всевозможных атрибутов ко всем тегам вплоть до проверки кода (правильность проверяется с точки зрения W3C.org)), но также есть поддержка XHTML, CSS-редактор, и так далее.


HTML Pad

Эта программа тоже пользуется большой любовью пользователей. Помимо всего стандартного HTMLPad поддерживает " onclick="return false">

Notepad

Notepad он же Блокнот. В этой программе нет никаких функций, которые облечат вашу жизнь: ни подсветки кода, ни вставки готовых конструкция кода, ничего, но зато эта программа есть в Стандартных на компьютере у каждого пользователя. С нее вы можете начать свои первые шаги в написании кода, а затем уже сменить на более понравившийся редактор. Все мы когда-то начинали с Блокнота :)


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

Если вы считаете, что какой-то редактор для верстки веб-страниц был несправедливо упущен в этой статье, если вы знаете ценный учебник или статью по какому-либо редактору, если вы считаете, что мы незаслуженно отругали или похвалили тот или иной редактор, то сообщите нам об этом на Форуме, или по Е-майл (admin@postroika.ru), мы обязательно прислушаемся к вашему мнению и постараемся исправиться.

О программе Macromedia DreamWeaver MX

Macromedia Dreamweaver MX - увлекательнейшая программа для создания Web-страниц. Ее возможности шире по сравнению с обычными функциями подобных редакторов.
Dreamweaver позволяет создавать объекты и страницы с использованием языка DHTML, поддерживает каскадные таблицы стилей, а также слои и действия " onclick="return false">Разработчику Web-проекта предлагаются гибкий и мощный инструментарий управления сайтом, включая встроенный полноценный FTP-клиент, визуальные карты сайтов и контроль над ссылками.
Новые возможности Dreamweaver MX значительно облегчают процесс создания страниц и управления сайтом.




Рабочее окно программы

Профессиональный инструмент для создания web-сайтов и приложений

Впервые художники, дизайнеры и программисты могут работать в единой мощной среде, предназначенной для проектирования, разработки и администрирования профессиональных web-сайтов и приложений. Macromedia Dreamweaver MX объединяет признанные средства визуальной разметки с функциями быстрой разработки web-приложений Dreamweaver UltraDev и мощными возможностями редактора Macromedia HomeSite, а также легко интегрируется с Flash MX. Лучший в мире инструмент для создания web-сайтов теперь полностью отвечает ожиданиям пользователей, помогая в построении ярких, интерактивных и эффективных интерфейсов.

Полный контроль над внешний видом и деталями реализации приложений.
Повышайте продуктивность, используя новую интегрированную рабочую среду, общую с Macromedia Flash MX и Macromedia Fireworks MX, которая включает снабженные закладками окна документов, перемещаемые инструментальные панели и встроенное окно просмотра файлов. " Ускорьте процесс разработки, используя профессиональные образцы кода и шаблоны дизайна, в том числе примеры структуры сайтов, формы, а также готовые функции " onclick="return false">
Организуйте быструю разработку web-приложений с использованием новейших серверных технологий. Визуальные инструменты и гибкие средства редактирования исходных текстов облегчают разработку приложений на базе любых популярных серверных технологий.
Используйте единую интегрированную среду разработки для создания сайтов на основе HTML, XHTML, XML, ASP, ASP.NET, JSP, PHP или Macromedia ColdFusion. Настраивайте и совершенствуйте среду разработки с помощью более 700 расширений, свободно распространяемых через сайт Macromedia Exchange for Dreamweaver. " Разрабатывайте стандартные web-приложения в кратчайшие сроки, используя библиотечный код для работы с базами данных и обновления web-форм, навигации в наборах записей или аутентификации пользователей. Тестируйте готовые страницы с использованием реальных данных. " Воспользуйтесь преимуществами ColdFusion MX для быстрой разработки web-приложений. Новичкам помогут мастера создания сайтов, примеры кода и справочные материалы. Профессиональные разработчики на платформе ColdFusion могут воспользоваться такими новейшими возможностями, как модули ColdFusion Components, web-службы, а также встроенные средства отладки и трассировки.

Используйте преимущества новых стандартов и технологий Интернета. Используйте возможности XML, web-служб и XHTML для обновления существующих сайтов и создания приложений нового поколения.
Используйте кросс-платформную универсальную среду разработки с поддержкой стандартов J2EE и .NET и работающую на платформах Windows и Macintosh. Воспользуйтесь преимуществами интеграции с лучшими инструментальными пакетами: Macromedia Flash MX и Fireworks MX. " Сократите сроки разработки приложений нового поколения благодаря поддержке XML, включающей возможность создания, редактирования и проверки XML-кода, а также импорта XML-схем. Инспектируйте web-службы на основе XML. Используйте для проверки web-служб на соответствие стандартам генерацию XHTML, удобное преобразование из HTML в XHTML и расширенную поддержку каскадных таблиц стилей CSS2. " Создавайте сайты, содержание которых доступно всем категориям пользователей. Применяйте инструменты проверки соответствия установленным требованиям для тестирования доступности и удобства использования отдельных web-страниц, web-сайтов, справочной системы и интерактивного интерфейса web-разработки для авторов.

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

Macromedia DreamWeaver MX. Вводная часть1

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


Переключатель "MX WorkSpace" позволяет выбрать стиль MX, там же, вы можете поставить флажок "HomeSite", но тогда вы будете работать в режиме редактирования HTML кода (это удобно для любителей набивать код вручную). Если вы установите переключатель "4 WorkSpace", тогда рабочая среда будет иметь вид как в прежних версиях (по 4-ю включительно). Я здесь выберу вид MX WorkSpace" и галочку "HomeSite" ставить не буду - в силу многолетней привычки.

В этой части я не буду подробно описывать все вкладки рабочей среды программы, так как полагаю, что хотя бы общее представлении вы имеете (прочитав "Macromedia DreamWeaver: Руководство пользователя").

Давайте создадим новый документ, дайте команду "File New" (рис.2.02)


На этой вкладке создайте новый документ, выбрав "Basic Page - HTML" и на вновь созданной странице напишите какой-нибудь текст состоящий из русско-английских слов. Для примера я написал "Rth77: полезная информация по работе с программой DreamWeaver", но вы можете вписать что вам угодно. После чего сохраните страницу командой "File Save as", но саму страницу не закрывайте в редакторе, а теперь откройте вновь созданную страницу в броузере, - что у вас получилось? В моем случае отобразилась такая вот надпись (рис.2.03)


Рис. 2.03

Поэтому первое с чего стоит начать - это обучить DreamWeaver кирилице. Дайте команду "Edit - Preferences", в открывшемся диалоге выберите категорию "New Document" и на этой вкладке,  (рис.2.04)


Рис. 2.04

в списке "Default Encoding", выберите "Cyrillic (Windows-1251)". Далее в левой части этого диалога выберите пункт "Fonts" и в списке "Font Setting" выберите пункт "Cyrillic"(рис.2.05)

Macromedia DreamWeaver MX. Вводная часть 2.

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

Для переключения режима отображения рабочей среды (режимов всего три: Code, Design и Code and Design) на панели инструментов нажмите "View" (рис.2.09)


Рис. 2.09

Выберите из этих режимов тот, с которым вы можете/умеете работать, хотя предпочтительно оставить "Code and Desig", тогда рабочее окно как бы разделится на две части и вы сможете видеть и сам HTML-код и страницу в режиме WYSIWYG.

Так же вы можете просматривать код в окне "Code Inspector" (Window - Other - Code Inspector) (рис.2.10)

 

Рис. 2.10

Вызвать эту вкладку так же можно клавишей "F10". Если вам надо отредактировать какой-нибудь тег - поставьте курсор мыши на его содержимое (для примера давайте для слова "Пример1" изменим атрибут тега "Align" , то есть сделаем так, чтобы слово "Пример1"  было не по центру страницы, а с левого края)

Форматы файлов компьютерной графики


Векторная графика


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

При создании веб-страниц в основном используется векторная графика созданная в формате Macromedia Flash. Она представляет из себя либо просто анимационные ролики (мультик про Масяню), или интерактивные элементы (кнопки, навигационные панели), или сайты полностью созданные на этой технологии. Также создаются игры с использованием Flash и еще интерфейсы под различные нужды, в общем спектр применения очень широк, а нас интересуют веб-страницы. Содержимое файла созданного во Flash состоит из математических формул (векторов), которые описывают геометрические формы и цветовые характеристики. Благодаря тому что соответствующие команды хранятся в виде простого текста, для описания графики требуется очень мало данных.

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

Графический редактор Macromedia Fireworks умеет работать и в векторном и в растровом режимах одновременно. В Fireworks можно легко создавать векторные рисунки любой сложности (применяя различные эффекты и градиенты), включая в них растровую графику (фотографии), а затем экспортировать свою работу в один из растровых форматов, получая в итоге файл приемлемого для интернет размера. Графический редактор Macromedia Freehand это редактор векторной графики позволяющий создавать сложные векторные рисунки, затрачивая при этом минимум усилий.

Все новые программы фирмы Macromedia тесно интегрированы друг с другом.
Форматы файлов векторной графики:

Существует очень много форматов векторной графики, проще говоря, у каждого редактора есть свой формат. В документ Fireworks, например, можно импортировать векторную графику созданную в графических редакторах: Freehand 9-10-MX, Adobe Photoshop, Adobe Illustrator, Corel Draw, а также формат EPS используемый для полиграфических целей и имеющий возможность хранения векторной и растровой графики, шрифтов, кривых калибровок и т.д. Файлы упомянутой программы Flash имеют расширение .swf

Растровая графика

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

Форматы файлов растровой графики:

• Формат BMP (Bitmap) - предназначен для Windows. Позволяет хранить изображения в цветовой модели RGB и индексированные изображения. Не применяется в web-дизайне и полиграфии. Широко используется в оформлении ПО.

• Формат GIF (Graphics Interchange Format, формат для обмена графикой) - создан специально для передачи по сети. Этот формат поддерживает только индексированные изображения с глубиной цвета от 1 до 8 бит. Причина этого ограничения состоит в том, что стандарт GIF разрабатывался для низких скоростей сетевых соединений. Так что каждый цвет, включенный в графический файл, представляет собой дополнительные данные, меньшее количество цветов означает меньшие размеры файла и более короткое время загрузки. Формат обладает одним из самых эффективных методов сжатия. Он позволяет значительно ужать размеры файла для изображений с большими площадями одинакового цвета или с повторяющимся рисунком без потери качества.

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

Еще одно свойство формата GIF - чересстрочная развертка. Когда графический файл загружается из сети в окно браузера, он обычно загружается сверху вниз и мы увидим его либо по частям, либо целиком, когда он полностью загрузится. Чересстрочный GIF сохраняется построчно в несколько шагов - начиная сверху каждую восьмую строку и в конце концов будут сохранены все строки пикселей. Когда такой GIF загружается в браузер, изображение выводится на экран аналогичным способом. Различные части изображения загружаются одновременно и мы можем представить себе картинку до появления целого изображения. Это свойство называется Interlaced.

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

• Формат JPEG (Joint Photographic Experts Group, объединенная группа экспертов по фотографии) - это стандарт сжатия, разработанный для уменьшения размеров файлов с изображениями, содержащими плавные переходы цветовых тонов и оттенков. Лучше всего он подходит для фотографий или графики со сложными цветами и эффектами освещения. Формат способен хранить полноцветные изображения в моделях RGB и CMYK, поэтому используется при создании графики для Internet и принтерных распечаток.

JPEG сжимает изображение, сохраняя его полную черно-белую версию и большую часть цветовой информации. Так как сохраняется не вся цветовая информация, формат JPEG называется форматом с потерями. Этот характер формата JPEG обычно проявляется (особенно в сильно сжатых файлах) в виде размытого или случайного распределения пикселей. В отличие от алгоритма сжатия GIF, который анализирует файлы по строкам, JPEG разбивает изображение на области близких цветов. Таким образом, если использовать формат JPEG для резкой графики с большими областями одного и того же цвета, то обычно получаются плохие результаты. Однако JPEG незаменим, когда речь идет о работе с фотографиями или графикой с широким диапазоном цветовых оттенков. Степень сжатия можно плавно изменять, выбирая оптимальное соотношение между качеством и размером изображения.

В Fireworks можно создавать прогрессивные JPEG (Progressive JPEG). Прогрессивные файлы JPEG похожи на чересстрочные файлы GIF тем, что они определяют способ вывода изображения JPEG при загрузке. Вместо загрузки сверху вниз прогрессивные файлы JPEG загружают различные области графического файла одновременно. При этом пользователь может видеть, что содержится в изображении, еще до того, как файл JPEG будет полностью загружен.

• Формат PNG (Portable Network Graphics, переносимая сетевая графика) сравнительно недавно разработанный растровый формат, призванный заменить формат GIF, но до сих пор не получивший широкого распространения в сети. Как и GIF, он позволяет сжать файл с изображением без потери качества, но при этом не ограничен палитрой в 256 цветов и способен хранить, как индексированные изображения, так и полноцветные изображения RGB. В этом формате применен метод сжатия, в котором из изображения удаляется информация, слабо воспринимаемая человеческим глазом. Степень сжатия можно менять от низкой, когда искажения минимальны, до высокой, когда изображение может претерпеть заметные изменения.

• Формат PNG используется в Fireworks в качестве своего формата, это обусловлено тем, что структура PNG позволяет разработчикам добавлять в формат собственные блоки данных и разработчиками Fireworks (фирма Macromedia) была проделана работа по усовершенствованию формата для нужд программы, поэтому для публикации PNG изображения (созданного в Fireworks) в сети, сначала необходимо оптимизировать файл средствами оптимизации Fireworks.

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