Реферат: Создание собственной web-страницы в Internet

Создание собственной web-страницы в Internet

Константин Иванченков


Первый шаг: СНАЧАЛА БЫЛ... ТЕКСТ


Это загадочное слово "WWW". Что такое HTML. Как обратиться к файлу в Internet. Понятие URL. Визуальные редакторы или Блокнот. Структура HTML-документа. Основные дескрипторы (теги). Использование команд форматирования текста. Создаём небольшую WEB-страничку без графики и публикуем её в Internet.

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

^ Это загадочное слово «WWW»

Слово «WWW» (World Wide Web) относится к той немногочисленной категории понятий, название которых известно всем, однако далеко не всякий в состоянии правильно объяснить, что же это в сущности такое. Довольно часто приходится слышать, как WWW отождествляют с Internet, что, мягко говоря, не совсем верно. На самом деле Web — это одна из частей Internet, которая на протяжении последних 5–6 лет стала феноменально популярной и способствовала гигантскому скачку развития Сети в целом.

WWW можно назвать графическим интерфейсом для работы с Internet. Изобретение Web связано с именем Тима Бернерс-Ли (Tim Berners-Lee). Бернерс-Ли работал в швейцарской лаборатории физики частиц CERN и ему часто приходилось использовать Internet для общения с коллегами. В то время получение информации из Сети было нетривиальной задачей и требовало высокой квалификации и владения специальными навыками. Ученый облегчил себе работу, создав систему, упрощающую навигацию. В 1991 г. система получила признание и была названа WWW.

«World Wide Web» переводится как «всемирная паутина», и название достаточно точно определяет суть явления. WWW — гигантская сеть страниц (документов), связанных между собой гиперссылками. Это действительно очень напоминает своими колоссальными размерами и структурой паутину, протянувшуюся по всему миру.

Наравне с WWW существуют и другие части Internet: e-mail, конференции, терминальный доступ, некоторые устаревшие службы, (например, Gopher), множество разнообразных коммуникационных программ, работающих через Сеть. Образно говоря, Internet — провода, позволяющие компьютерам разных типов обмениваться информацией. А вот WWW, электронная почта, Gopher и т. д.— это то, что наполняет эти провода содержанием.

Способ, позволяющий «общаться» компьютерам, называется протокол. Internet работает на основе двух протоколов: TCP (Transmission Control Protocol — протокол управления передачей) и IP (Internet Protocol — протокол Internet),— которые вместе стали известны как TCP/IP. Изобретение этих протоколов в начале 80-х годов позволило обмениваться данными и использовать их как компьютерам, так и компьютерным сетям разных типов.

^ Что такое HTML

Основа WWW — файлы в формате HTML (Hyper Text Markup Language — язык разметки гипертекста), или гипертекстовые страницы. Гипертекст — это легкая в использовании и чрезвычайно мощная система связанных слов и фраз, позволяющая легко перемещаться по особым образом организованным страницам. Она связывает фразу или слово одной страницы с любой другой страницей, абзацем, фразой или словом. Например, на Web-странице в предложении «Как ныне сбирается вещий Олег отмстить...» слово «Олег» выделено как гиперссылка. Щелкнув по ней, вы попадаете на страничку с историческим комментарием о роли князя Олега в истории Руси. Если развить идею гипертекста и включить в него графику, видео и звук, мы получим гипермедиа. Гипермедиа — среда, основанная, как и гипертекст, на взаимосвязях, в которой в качестве гиперссылок могут выступать визуальные и аудиокомпоненты. Гипертекст и гипермедиа являются фундаментальными для WWW технологиями, а HTML — средство для работы с этими технологиями.

HTML расширение языка SGML (Standart General Markup Language — стандартный язык разметки), глобального стандарта описания языков разметки гипертекста. SGML одобрен ISO (International Organization for Standartization — Международная организация по стандартизации) в 1986 г. и является стандартом для многих государственных и коммерческих систем создания документов. Документы SGML не «привязаны» к какой-нибудь программе, операционной системе и т. п. Таким образом, когда потребовалось выбрать стандарт для документов WWW, выбор естественно остановился на HTML.

Файлы HTML состоят из команд форматирования, текста и ссылок на другие файлы или объекты (графика, звуки, программы). Программа для просмотра HTML-документов (броузер) интерпретирует код HTML, содержащийся в файле, и согласно командам форматирования собирает готовую Web-страничку.

^ Как обратиться к файлу в Internet

Документы, из которых состоит Web, находятся на Internet-серверах. Чтобы добраться до какого-либо WWW-документа, вы должны набрать в броузере, в строке «адрес», путь к этому документу. Этот путь называется URL (Uniform Resourse Locator — унифицированный указатель ресурса). URL состоит из названия сервера и, если требуется, названия каталога, в котором находится документ, и названия самого документа (т. е. имени файла HTML), разделенных знаком обратной косой черты (обратным слэшем) «/».

Регистр символов, используемых в URL, не имеет никакого значения, т. е. www.submarine.ru/index.html указывает на абсолютно тот же сервер, что и Www.SubMarine.Ru/index.html. В то же время иногда регистр символов, используемых в названиях директорий и файлов на сервере, может иметь значение (это зависит от программного обеспечения, установленного на сервере).

Для передачи разных типов данных были созданы протоколы, базирующиеся на TCP/IP. При работе с гипертекстовыми файлами используется HTTP (Hypertext Transfer Protocol — протокол передачи гипертекста). Пересылка по сети файлов любых типов осуществляется с помощью протокола FTP (File Transfer Protocol — протокол передачи файлов). Используя этот протокол, мы будем загружать файлы нашей web-странички на сервер. Кроме того, существуют протоколы передачи файлов новостей (news), службы Gopher и т. д.

В принципе, перед адресом документа, который вы хотите загрузить из Сети, необходимо проставлять тип протокола, по которому этот документ будет передаваться на ваш компьютер, добавляя к нему двоеточие и два обратных слэша (http://, ftp:// и т. д.), но делать это на практике нет необходимости, так как современные броузеры делают это автоматически. Итак, после того, как вы набрали URL интересующего вас документа, ваша программа-броузер, используя соответствующий протокол, обращается к требуемому серверу и запрашивает у него указанный файл. Далее файл передается на ваш компьютер и броузер и, используя команды форматирования и ссылки на объекты, содержащиеся в тексте, генерирует готовый для просмотра документ.

^ Перейдем к делу...

Из чего, собственно, состоят файлы HTML? Из обычного текста: вы можете просмотреть исходный код файла в любом текстовом редакторе, включая Блокнот Windows (Notepad). Но в этом случае вы увидите не web-страничку, а лишь текст в сочетании с метками HTML, из которых программа-броузер ее генерирует. Редактировать web-документы вы также можете, используя самый обычный Блокнот. Именно так и поступают многие опытные web-дизайнеры, несмотря на то, что сейчас существует большое количество визуальных редакторов web-страниц. Эти редакторы зачастую обладают очень богатыми средствами и предоставляют пользователю возможность создавать великолепно выглядящие страницы, используя многочисленные шаблоны и библиотеки картинок, как правило, входящие в комплект поставки редактора. Единственное, чем не будут страдать web-страницы, подготовленные с помощью шаблонов,— это оригинальностью. Кроме того, HTML-код, который генерируют визуальные редакторы, зачастую оставляет желать лучшего: избыточность кода и ошибки в форматировании отнюдь не улучшают скорость загрузки и внешний вид документа.

Одним из самых популярных визуальных редакторов является Netscape Composer, входящий в состав пакетов Netscape Navigator Gold и Netscape Communicator (www.netscape.com). Популярностью также пользуются пакеты Microsoft FrontPage (www.microsoft.com/frontpage/) и NetObjects Fusion (www.netobjects.com).

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

Кстати...

В WWW существует негласное правило, согласно которому первый файл, загружаемый броузером с какого-либо сервера по умолчанию, должен называться index.html. Таким образом, если вы явно не указываете имя документа, который вам требуется, а пишете только имя сервера, например www.yahoo.com, автоматически будет загружен файл index.html, находящийся на этом сервере, т. е. фактически будет выполнена команда http://www.yahoo.com/index.html. Итак, первый файл который мы с вами создадим, а потом разместим в Internet, будет называться index.html. Для этого вам придется освоить лишь несколько команд форматирования и оформления текста в формате HTML.

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

Метка языка HTML, или тег (англ. tag), или дескриптор, является основным средством разметки документа. При написании теги отделяются от остального текста угловыми скобками: «<» и «>». Регистр символов при этом также не имеет никакого значения, но хорошим тоном считается набор тегов в верхнем регистре, т. е. заглавными буквами. Это помогает визуально отделить теги от основного текста при последующем редактировании.

Существует два вида тегов: требующие закрытия (т. е. ограничения действия) и не требующие закрытия. Например, дескриптор , изменяющий начертание шрифта на наклонное, является тегом, требующим закрытия, т. к. если он не будет закрыт, то весь текст, следующий после него, будет наклонным.

Закрывающим элементом всегда служит тот же самый тег, но со знаком «/» после первой угловой скобки.

Пример:
^ Этот текст будет отображаться как наклонный.

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

Пример:
^ Этот текст будет отображаться как наклонный.
А этот, как наклонный и подчеркнутый.

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

Пример:
На странице этот текст

будет располагаться в две строки.

Теперь попробуем составить собственный шаблон WWW-странички. Запустим замечательный web-редактор — Блокнот, он же Notepad (правды здесь больше, чем иронии). В русской версии Windows 95 он должен располагаться в разделе Стандартные в меню Пуск. Впрочем, вы можете использовать абсолютно любой текстовый редактор, который вам нравится.

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

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

Например:






Первая web-страничка


CONTENT=”text/html; CHARSET=windows-1251”>





Этот текст не оформлен никакими дескрипторами,

поэтому на странице он будет отображаться в

соответствии с настройками броузера и свойствами,

указанными в теге . Броузер будет

автоматически форматировать текст в зависимости

от ширины окна и разрешения дисплея.





Выглядеть это будет так

Для управления шрифтовым оформлением WEB-страниц предназначен дескриптор . Этим тегом указываются параметры шрифта, такие, как размер, цвет и название. Параметры шрифта в теге указываются в кавычках в любом порядке.

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

В настоящее время стандартными шрифтами, использующимися в WWW, являются Times New Roman и Courier New. Также вы можете пользоваться и шрифтом Arial, так как он распространен не менее широко, чем указанные. Пользоваться другими шрифтами нет смысла, поскольку они недостаточно популярны.

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

SIZE=”6” COLOR=”#8080C0”>Текст.

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

FACE=”Arial” SIZE=”6” COLOR=”#8080C0”>Текст.

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

Пример:
FACE=”Verdana, Tahoma, Arial”>Текст.

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

Для управления начертанием символов, т. е. для установки параметров Жирный (Bold), Курсив (Italic) и Подчеркнутый (Underlining), используются теги , , . Как вы можете догадаться, эти теги требуют закрытия и могут использоваться, перекрывая действие друг друга.

Пример:


Жирный
Жирный-Курсив
Жирный-Курсив-Подчеркнутый

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

^ Команды форматирования абзацев

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

. Он имеет параметр ALIGN, управляющий выравниванием текста параграфа с помощью четырех аргументов: LEFT, RIGHT, CENTER и JUSTIFY:


— выравнивание текста по левому краю экрана;


— выравнивание текста по правому краю экрана;


— выравнивание текста по центру экрана;


— полное выравнивание текста по обоим краям экрана.

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

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

Пример:


На странице этот текст

будет располагаться в две строки.

Последним дескриптором, о котором мы сегодня расскажем, будет тег . Это очень простой тег. В броузере он отображается как горизонтальная линия. Для управления внешним видом отображаемых линий у тега имеются четыре параметра: SIZE, WIDTH, ALIGN и NOSHADE:


SIZE=N(пикселов)

устанавливает толщину линии;

WIDTH=N(пикселов или процентов)

устанавливает ширину линии. Ширина линии может быть жестко указана в пикселах или в процентах относительно ширины окна броузера;

ALIGN=LEFT (RIGHT или CENTER)

устанавливает выравнивание отображаемой линии относительно окна броузера. При отсутствии параметра ALIGN линия всегда центруется относительно окна броузера;

NOSHADE

отключение трехмерного режима отображения линий. При указании этого параметра линия будет отображаться как простая черная полоса (см. рис. 4).


Теперь пора приступить к сооружению собственной WWW-странички.

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

^ Разместим страницу в Сети

Как вы уже знаете, web-странички располагаются на Internet-серверах, т. е. компьютерах, подключенных к Internet и выполняющих серверные приложения. Соответственно, чтобы созданную вами страницу могли увидеть другие люди, необходимо разместить ее на Internet-сервере. После этого она станет доступна любому пользователю Internet. Существует большое количество серверов, которые позволяют бесплатно разместить на них web-сайты. Как правило, провайдеры также предоставляют своим пользователям место под web-страницы. Список бесплатных WEB-серверов вы можете найти по адресу http://www.homepage.techno.ru/ilya/servers.htm.

При выборе сервера, на котором вы решите расположить вашу страницу, рекомендуем руководствоваться не только соображениями благозвучности и легкости запоминания названия сервера, но и скоростью доступа к нему. Если вы находитесь в России и вашу страничку будут просматривать люди, преимущественно живущие в той же части света, вряд ли имеет смысл располагать вашу страницу на сервере где-нибудь в Бразилии. Гораздо более удобным решением будет разместить вашу страничку на сервере вашего провайдера. Но если однажды вы решите его сменить, то придется переносить страницу на другой сервер, и соответственно адрес ее изменится. Это неудобно. Поэтому за неимением собственного сервера страницы лучше располагать на бесплатных серверах, таких как www.geocities.com или www.chat.ru.

Для размещения нашей тестовой странички мы использовали общедоступный бесплатный сервер www.chat.ru. Для того чтобы бесплатно получить место на сервере для размещения своих страничек, достаточно просто зарегистрироваться, т. е. заполнить небольшую анкету.

Зарегистрировавшись под именем podlodka, заполнив несложную анкету и указав пароль, мы получим e-mail-адрес podlodka@chat.ru и каталог с тремя мегабайтами дискового пространства. Таким образом, URL нашей странички будет www.chat.ru/~podlodka. Знак «~» (тильда) добавляется сервером автоматически.

Войдя на заглавной странице сервера www.chat.ru в меню «ДЛЯ ПОЛЬЗОВАТЕЛЯ», а затем «ФАЙЛЫ ВАШЕЙ ДОМАШНЕЙ СТРАНИЧКИ», введя имя пользователя и пароль, нажмите на следующей странице кнопку «UPLOAD».

Впишите в верхнем окошке имя и путь к созданному файлу или выберите его, нажав на кнопку «ОБЗОР». Во втором окошке должно быть указано имя index.html. В строке «SOURCE FILE ENCODING» выберите «WINDOWS (CP1251)» и нажмите на кнопку «ЗАГРУЗИТЬ/UPLOAD». После этого, если все пройдет удачно, вы получите сообщение «File index.html successfuly uploaded».

В случае, если вы использовали на вашей страничке какой-либо фоновый рисунок, нужно загрузить его в ваш каталог на сервере. Для этого вернитесь в предыдущий экран, выберите имя файла, который нужно загрузить, и проделайте те же действия, но с единственным изменением: в выпадающем меню «SOURCE FILE ENCODING» выберите «BINARY (FILE)».

Теперь, набрав в строке броузера URL вашей WEB-странички, вы попадете на нее. Возможно, она еще не слишком блистательна для того, чтобы вызвать интерес у видавших виды посетителей Сети... но, кто знает, во что она превратится, когда у вас появится побольше знаний и опыта? Главное — не останавливаться на достигнутом!

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


^ Второй шаг: ОТ ТЕКСТА К ГРАФИКЕ

Графические форматы: GIF и JPEG. Работа с форматами в Adobe Photoshop. Немного теории. Откроем замечательный Web-редактор «Блокнот» :)

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

Главное, что надо запомнить, – в Internet особенную важность приобретают не художественные достоинства картинки, а скорость загрузки. Никто, кроме вас, не станет ждать 5 мин, пока появится ваш шедевр, и пойдет дальше. Так что главное достоинство картинок для Сети — минимальный размер.

Для размещения изображений в WWW в данное время используются два графических формата — GIF и JPEG. Остальные типы графических файлов WWW-броузеры без применения специальных дополнительных программ (plug-in) не поддерживают.

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

Причина подобной несправедливости кроется в том, что формат ^ GIF позволяет сохранять изображение, содержащее не более 256 цветов. Цвета могут быть любыми и в любой комбинации, но общее их количество ограничено этой цифрой. Поэтому в данном формате удобно хранить изображения с небольшим количеством цветов (меньше 256), т. к. это позволяет за счет сокращения объема информации о цветах значительно уменьшить размер файла, а следовательно, и время загрузки. Помимо того, формат GIF используется для сохранения анимированных картинок и изображений с прозрачными частями — в JPEG такие возможности просто не заложены.

Область же применения формата ^ JPEG определяется тем, что он сохраняет полную цветовую палитру 24-битного изображения (True Color), которая может содержать миллионы цветов. При таком объеме информации размер файла получается очень большим, но главной особенностью формата JPEG является его способность хранить изображение в сжатом, как бы заархивированном виде. Степень архивации изображения, сохраненного в формате JPEG, может быть очень большой: нормальным считается сжатие картинки в 10–20 раз без видимой потери качества.

Приступим?..

При размещении изображения в WWW необходимо помнить о том, что просматривать его будут разные люди и компьютеры у них будут разные. Наверняка попадутся и такие, у которых разрешение монитора будет 640х480 точек (пикселов). Так что есть смысл ограничить размер картинки до максимальной ширины в 600 и длины в 400 точек. Тем более что такая картинка будет весьма немаленькой по размеру файла и соответственно времени загрузки. Размер картинки вы можете узнать, открыв ее в Adobe Photoshop (именно эту программу мы предлагаем вам использовать для работы с изображениями) и щелкнув мышкой при нажатой клавише ALT по участку статусной строки слева от черного треугольника. Изменить размеры изображения в Photoshop можно с помощью команды Image Size в меню Image. Не забудьте установить флажок в окошко Resample Image, иначе у вас ничего не получится : )



После изменения размеров изображение обычно несколько теряет резкость, и приходится ее восстанавливать. Сделать это можно при помощи фильтра Unsharp Mask в разделе Sharpen, меню Filter:



Поработайте с этим фильтром, установив галочку в окошко Preview. Когда резкость изображения будет вас устраивать — нажмите ОК.

Итак, мы разобрались с изменением размеров и корректировкой резкости изображения. Пришло время сохранять картинку. Вариантов сохранения всего два — GIF и JPEG; осталось только выбрать, какой больше подходит для вашей картинки. Рассмотрим на примере несколько изображений и варианты их сохранения для публикации в WWW.

Полутоновые изображения (фотографии)

Для фотоизображений характерно большое количество цветов и полутонов, поэтому для них оптимально использование формата ^ JPEG.

При сохранении изображения необходимо отключить опцию Save Thumbnail в меню Save, т. к. это увеличивает размер файла. Сделать это раз и навсегда можно в диалоговом окне Saving Files, которое находится в разделе Preferences, меню File, установив в выпадающем списке Image Preview опцию Never Save.

При сохранении файла используйте имя, состоящее не более чем из восьми латинских символов без заглавных букв и пробелов. Расширение файла также должно быть набрано строчными буквами — например, «photo1.jpg».

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



Степень сжатия указывается в разделе ^ Image Options с помощью выпадающего списка и движка Quality. Для большинства изображений опция Medium (3) представляет оптимальное соотношение между качеством и размером файла. Не бойтесь экспериментировать: иногда может понадобиться меньшая степень сжатия, а иногда большая. Сохраните несколько вариантов файла с разной компрессией и просмотрите их в броузере. Это позволит вам выбрать для данного изображения наилучшее соотношение качество / размер файла.

Для оптимизации цветового баланса вашего изображения выберите в нижней части диалогового окна, в разделе ^ Format Options, переключатель Baseline Optimized. Вы можете также использовать новый формат Progressive JPEG, выбрав переключатель Progressive и параметр Scans.

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

Рисунки, иллюстрации, фотографии
с небольшим количеством цветов

Для публикации подобных изображений в WWW больше подходит формат ^ GIF, т. к. если иллюстрация содержит не слишком много цветов, то, используя возможности этого формата и сохраняя ее в режиме Indexed color, с неполной цветовой палитрой, мы можем получить значительно меньший объем файла, чем при сохранении иллюстрации в формате JPEG. Давайте подробно рассмотрим процедуру сохранения иллюстрации в формате GIF с одновременным уменьшением цветовой палитры изображения и размера файла.

Для сохранения файла в формате ^ GIF в пакете Adobe Photoshop существует специальный модуль GIF89a Export, находящийся в разделе Export, меню File. Использование этого модуля позволяет визуально подобрать наилучшее соотношение между качеством картинки и размером файла, не выходя из диалогового окна Export. Модуль экспорта GIF89a Export также позволяет сохранять изображения с прозрачными элементами.

Для этого откройте файл в Photoshop и убедитесь, что изображение находится в режиме ^ RGB color (меню Image / Mode), его размеры вас устраивают и его разрешение составляет 72 dpi. (меню Image / Image Size). Откройте диалоговое окно GIF89a Export:



Не обращайте пока внимания на верхнюю часть окна с разделом Transparency From Mask — она понадобится нам позже, а сейчас мы будем работать в нижней части диалогового окна с параметрами Palette и Colors.

Параметр ^ Palette управляет выбором палитры цветов, которая будет создана для данного изображения. Вы можете выбрать один из трех режимов: Exact, Adaptive и System.

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

Режим Adaptive используется в тех случаях, когда число цветов в изображении больше 256, и потому режим Exact недоступен. Для создания палитры вы указываете количество цветов, из которых следует ее сформировать. Оно может варьировать от 256 до 1. Этот параметр устанавливается в окошке Colors.

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

Если вы выбрали палитру Exact, можете смело нажимать на кнопку OK и сохранять ваше изображение. Напоминаем, что при сохранении файла следует использовать имя, состоящее не более чем из восьми латинских символов без заглавных букв и пробелов. Расширение файла также должно быть набрано строчными буквами — например, «menu1.gif». Если вы сохраняете изображение с адаптивной палитрой, выберите или впечатайте в окошко Colors минимальное количество цветов, которыми можно передать все необходимые детали вашего изображения. Обратите внимание, что влияние уменьшения количества цветов в палитре на размер файла зависит от конкретной картинки, ее размеров и цветового содержимого. Для очень маленьких изображений существенное сокращение количества цветов не приведет к значительному уменьшению размеров файла. После выбора палитры и количества цветов вы можете посмотреть, как при таких параметрах сохранения изображение будет выглядеть в Web-броузере. Для этого щелкните по кнопке Preview:

Для просмотра изображения выберите инструмент «Рука» и поводите им по изображению при нажатой кнопке мыши. Если ваше изображение слишком мало, вы можете увеличить масштаб просмотра с помощью инструмента «Лупа». Для уменьшения масштаба используйте лупу с нажатой клавишей ALT.

Если понравилось, щелкайте ОК и попробуйте еще немного уменьшить количество цветов в палитре изображения. Затем снова нажмите Preview и оцените качество картинки. Достигнув наименьшего приемлемого количества цветов, нажмите ОК и сохраните изображение.

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

 

JPEG

Quality: 4
Размер файла: 7.24Kb

 

 

GIF с адаптивной палитрой

 


8 цветов
Размер файла: 1.25Kb


16 цветов
Размер файла: 1.56Kb


32 цветa
Размер файла: 2.04Kb


64 цветa
Размер файла: 2.6Kb


128 цветов
Размер файла: 3.53Kb


256 цветов
Размер файла: 3.95Kb

В левой нижней части окна ^ Export находится окошко Interlaced. Оно управляет отображением сохраненного рисунка при загрузке в броузер. Если это окошко помечено галочкой, изображение будет появляться постепенно, с прорисовкой деталей по мере загрузки с сервера (как в Progressive JPEG).

Формат GIF предусматривает также такие полезные функции, как сохранение анимированных изображений и изображений, содержащих прозрачные элементы, т. е. части картинки, через которые будет видно фон Web-странички.

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

Откройте в Photoshop картинку, у которой хотите убрать фон. Сначала фон необходимо сделать одноцветным. Затем подготовьте изображение к экспорту и выделению цветов, которые должны стать прозрачными. Для этого нужно перевести изображение в режим Indexed Color. Делается это в меню Image / Image Mode:



Взгляните на появившееся диалоговое окно. Все его параметры, кроме одного, вам уже знакомы. Не обращайте пока внимания на параметры списка Palette (цветовая палитра), которые вы пока не знаете. Нам понадобятся только режимы Exact и Adaptive, с которыми вы уже умеете работать. Cделать с ними нужно то же самое, что вы делали в модуле GIF89a Export, только здесь нельзя будет просмотреть получившееся изображение.

В нижней части диалогового окна ^ Indexed Color, в разделе Options, появился новый параметр — Dither. Он управляет смешиванием цветов при создании цветовой палитры изображения. В случае, если изображение содержит полутона, в этом параметре лучше установить значение Diffusion, а если в изображении присутствуют только «чистые» цвета — установите значение None, т. е. без смешивания цветов.

После того как вы установите значения Palette и Color и нажмете ОК, изображение будет конвертировано в режим ^ Indexed Color. Если вас не устраивает качество получившейся картинки, нажмите комбинацию клавиш CTRL и Z (команда Undo) и попробуйте еще раз с другими значениями параметра Color.

После подбора оптимального соотношения качество / размер файла откройте диалоговое окно GIF89a Export. Теперь оно имеет совсем другой вид:



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

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

Если вы ошиблись, выбирая цвет — можете отменить выделение, щелкнув «Пипеткой» при нажатой клавише CTRL по этому цвету в окне изображения или палитре. Закончив выделение цветов, нажмите ОК и сохраните изображение. Все. Теперь можно размещать наш рисунок на страничке.

Немного теории

Для размещения картинок на Web-страницах существует специальный тег , имеющий обязательный параметр SRC="URL" (источник=путь к файлу) и несколько необязательных. Рассмотрим этот тег поподробнее.



SRC="URL" – путь к файлу изображения. Если файл находится на сервере в том же каталоге, что и документ, из которого к нему обращаются, то путь к нему указывать не нужно — требуется указать только имя файла (сохраняя регистр букв). Если файл изображения находится на том же сервере, но в другом каталоге, требуется указать путь к файлу от каталога, где находится документ, из которого к нему обращаются.
^ Пример: допустим, файл изображения logo.gif находится в каталоге PICTURES, вложенном в основной каталог сайта. Путь к нему будет выглядеть так:

SRC="pictures/logo.gif"

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



Необязательные параметры

BORDER=pixels – параметр, указывающий, рамку какой ширины (в пикселах) следует генерировать вокруг изображения. В большинстве случаев рамка не требуется; чтобы она не отображалась, укажите значение параметра BORDER равным нулю.

HEIGHT=pixels и WIDTH=pixels – значения этих параметров указывают броузеру размеры изображения (в пи