Вот, к примеру, исходная картинка (рис. 17.3), файл Jpeg, сохраненный с качеством в 50 процентов (рис. 17.4), и файл Jpeg, сохраненный с качеством в 10 процентов (рис. 17.5).

Рис. 17.3. Исходная картинка.

Рис. 17.4. Файл Jpeg, сохраненный с качеством в 50 процентов.

Рис. 17.5. Файл Jpeg, сохраненный с качеством в 10 процентов

При этом первый рисунок имеет размер 142 килобайта, второй — 17, а третий — 7. Как можно видеть, при утере до половины всей информации о мелких деталях изображения его видимое качество заметно не ухудшается, а размер сокращается во много раз. Именно это и позволяет использовать изображения в формате Jpeg, сжатые на 60–70 процентов, в оформлении web-страниц. Поэтому обязательно оптимизируйте графику, сохраняя или пересохраняя размещаемые в Web рисунки в jpeg-файлах с качеством 40–50 %.

При сохранении изображения в формате Jpeg с пониженным качеством можно улучшить его внешний вид, применив предварительно фильтр "размытия" изображения (в англоязычных программах он обычно называется Blur). Тогда "зернистость" изображения будет меньше.

У обоих форматов графических файлов — Gif и Jpeg — разное предназначение. Первый просто идеален для небольших рисунков, кнопочек, мерцающих звезд, в общем, всего того, что рисуется "от руки". Второй же хорошо использовать для размещения в Интернете фотографий и сканированных изображений. Кроме того, только Gif позволяет сделать анимированный рисунок, — то есть уместить в одном графическом файле небольшой мультипликационный ролик. Последнее делает Gif наилучшим форматом для баннеров — рекламных клипов, размещаемых на сайтах Интернета.

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

Существует множество программ для создания графических объектов в форматах Gif и Jpeg. Но, к сожалению, на сегодняшний день нельзя назвать ни одной программы, которая сочетала бы в себе многофункциональность и удобство для пользователя. Сложную графику хорошо делать в Adobe Photoshop, но для его освоения придется потратить немало часов. В качестве элементарного средства можно использовать MS Paint, а затем изображение, созданное в нем, конвертировать в нужный формат с помощью Microsoft Photo Editor.

Кроме того, рисунки, созданные в Microsoft Word, будут отконвертированы в форматы Gif и Jpeg при сохранении документа в формате HTML. Таким образом конвертор HTML редактора Microsoft Word можно использовать для преобразования в форматы Gif и Jpeg внедренных в документы рисунков. Конвертор HTML сам выберет лучший формат для каждого рисунка, подберет степень оптимизации.

Заключение

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

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

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

Глава 18

Script Editor: web — редактор из недр Office

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

Все программы, облегчающие создание html-документов, можно условно разделить на три категории. К первой из них будут относиться программы, которые просто облегчают написание собственно HTML-кода. Они имеют развернутую систему замены и поиска фрагментов текста, могут подсвечивать разными цветами HTML-тэги, отделяя тем самым их от информационного содержимого страницы. Некоторые подобные программы позволяют даже одним нажатием мыши или кнопки вставлять в подготавливаемый документ целые фрагменты кода, заранее написанные пользователем или даже изначально встроенные в программу — например, простейшие сценарии. Таких редакторов очень много, практически все они доступны через Сеть, — это и CoffeeCup, и HotDog, и другие. К сожалению, почти все они являются условно-бесплатными и требуют регистрации, причем стандартные способы продления жизни этих программ в их новых версиях крайне затруднены, — их регистрация происходит через Интернет. Среди бесплатных программ подобного рода стоит отметить Aditor^[48], который умеет подсвечивать тэги разными цветами, работать с различными кодировками, имеет многооконный интерфейс.

Ко второй категории относятся так называемые WYSIWYG — редакторы. WYSIWYG — это английская аббревиатура слов "what you see is what you get", то есть "что вы видите, то и получаете". В этих редакторах создание web-страницы напоминает создание документа в Microsoft Word: совершенно не нужно думать о тэгах, параметрах. Можно даже не знать, что такое "тэг" и как он выглядит. Страница создается буквально на глазах: достаточно просто написать текст, вставить рисунки или таблицы, оформить строки нужным образом, — и web-страница готова! Типичными примерами таких редакторов служат Microsoft FrontPage Express, Microsoft Word с его средством сохранения документов в формате HTML, редактор Web-страниц из комплекта Netscape Communicator.

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