Учебник Macromedia Dreamweaver (стр. 20 из 135)
· объединение тегов, где это возможно;
· удаление комментариев.
За "чистку" HTML-кода "отвечает" пункт Clean Up HTML меню Command, выбрав который, вы откроете диалоговое окно Clean Up HTML / XHTML, показанное на рис. 3.58.
Рис. 3.58. Диалоговое окно Clean Up HTML / XHTML
Группа флажков Remove поможет вам задать, что именно следует удалять при "чистке":
· Empty Container Tags -"пустые" теги, т. е. парные теги без содержимого;
· Redundant Nested Tags — ненужные (избыточные) теги;
· Non-Dreamweaver HTML Comments — HTML-комментарии, вставленные пользователем;
· Dreamweaver Special Markup — HTML-комментарии, вставленные самим Dreamweaver для своих служебных целей, например, чтобы пометить вставленную дату с возможностью обновления;
· Specific Tag(s) — теги, перечисленные в поле ввода, находящемся правее.
Группа флажков Options поможет вам задать дополнительные параметры "чистки":
· Combine Nested <font> Tags when Possible — по возможности комбинирует вложенные теги <FONT> с разными параметрами;
· Show Log on Completion — показывает статистику по окончании "чистки".
Задав нужные параметры (в подавляющем большинстве случаев можно оставить заданные по умолчанию), нажмите кнопку ОК для запуска процесса "чистки" или Cancel — для отказа от нее. "Чистка" может занять довольно много времени, особенно если Web-страница сложна, а компьютер, на котором установлен Dreamweaver, маломощен. По окончании, если был включен флажок Show Log on Completion, на экране появится окно статистики, где будет описано, что сделал Dreamweaver в процессе "чистки". В нашем случае (рис. 3.59) ничего сделано не было — HTML-код нашей страницы и так был "чист". Закройте это окно нажатием кнопки ОК.
Рис. 3.59. Окно статистики "чистки" HTML-кода
Проверка совместимости HTML-кода
В мире эксплуатируется много разных программ Web-обозревателей, сильно различающихся как функциональными возможностями, так и степенью совместимости с различными интернет-стандартами. Более того, разные версии двух самых распространенных Web-обозревателей также имеют очень большие отличия. И Web-страница, прекрасно отображающаяся в одной программе, совершенно не работает в другой.
Как избежать проблем с совместимостью? Что нужно для этого делать?
Прежде всего, конечно, соблюдать все стандарты HTML. He кидаться сломя голову за новомодными, свежевведенными расширениями этих самых стандартов и, тем более, нестандартными, "фирменными" возможностями той или иной программы. Иначе вы можете сильно сузить свою аудиторию. Кроме того, фирмы Microsoft и Netscape разработали ряд рекомендаций для Web-дизайнеров, которые позволят им создавать специальные, "совместимые" страницы, одинаково хорошо (или, по крайней мере, сносно) отображаемые в большинстве программ. Рекомендуем вам ознакомиться с этими рекомендациями, хотя в конкретных случаях помощи от них не так уж и много, и вам придется изрядно поломать голову.
Но как узнать, будет ли данная Web-страница нормально отображаться в разных программах Web-обозревателей? Вам поможет в этом Dreamweaver.
Выберите пункт Check Target Browsers в подменю Check Page меню File. На экране появится диалоговое окно Check Target Browsers (рис. 3.60).
Рис. 3.60. ДиалоговоеокноCheck Target Browsers
В списке Browsers представлены все программы, о которых "знает" Dreamweaver. Версия MX поддерживает разные версии Internet Explorer, Navigator и Opera; новейший Web-обозреватель Mozilla там отсутствует. Выберите нужные программы, щелкая мышью на соответствующих строках списка, после чего нажмите кнопку Check.
После довольно долгого ожидания Dreamweaver откроет особую панель Target Browser Check и выведет в ней результаты проверки страницы на совместимость (рис. 3.61) в виде списка. В колонке Description этого списка будет дано краткое описание найденной несовместимости, увы, на английском. Дважды щелкните мышью на нужной строке списка — и Dreamweaver, переключив окно документа в режим показа страницы и кода, подсветит проблемный HTML-тег.
Рис. 3.61. Панель Target Browser Check
Здесь сразу видно, что атрибут ALINK (цвет активной гиперссылки) тега <BODY> не поддерживается Opera. Конечно, это не смертельно — в целом наша первая Web-страничка совместима со всеми наиболее распространенными программами Web-обозревателей. Но эта функция, встроенная в Dreamweaver, позволит вам в будущем избежать серьезных проблем с совместимостью.
Итак, мы создали первую, главную страницу нашего сайта. В процессе ее создания мы научились работать с текстом и гиперссылками, используя для этого стандартные инструменты Dreamweaver. Следующим шагом будет работа с графикой и мультимедийными файлами, иными словами, внедренными объектами.
В главе 4 мы научимся вставлять на страницы графические изображения, звуковые и видеоклипы. А заодно создадим страничку с более подробными сведениями о гипотетическом Иване Ивановиче и его портретом.
· Глава 4. Рисунки, звуки, фильмы
o Работа с графическими изображениями
o Два вида графических изображений
o Вставка графического изображения
o Изображения-гиперссылки
o Активные изображения
o Карты-изображения
o Графика Macromedia Flash
o Графика Macromedia Shockwave
o Фоновые изображения
o Мультимедиа
o Поддержка мультимедийных данных
o Модули расширения
o Элементы ActiveX
o Что дальше?
ГЛАВА 4
Рисунки, звуки, фильмы.
В главе 3 мы научились работать с текстом. В этой главе мы разберемся со всем, что относится к внедренным объектам: графическими изображениями и мультимедийными данными (прежде всего, аудио- и видеоклипами). Мы научимся помещать их на Web-страницы и использовать для специальных целей, например, для создания изображений-гиперссылок и изображений-карт. И Dreamweaver нам в этом поможет.
Следующая по очереди Web-страница нашего сайта — сведения об авторе. А какая страница об авторе обойдется без его портрета. Но прежде чем помещать на Web-страницу портрет (да и любое изображение), неплохо было бы создать эту самую страницу. Этим мы сейчас и займемся.
Сначала создадим в Dreamweaver новую пустую Web-страницу. Вы уже знаете, как это делается. Не будем ничего особо выдумывать: достаточно сочинить немного текста. Единственное: цвета и шрифты на новой странице должны быть такими же, как и на ранее созданной. Это необходимо, чтобы соблюсти единообразное оформление, чтобы пользователь знал, что пока еще находится на одном сайте.
На рис. 4.1 показана наша новая Web-страница. Опустим рассказ о ее создании, т. к. в этой главе речь пойдет совсем о другом.
Как видите, мы не слишком утруждали себя придумыванием деталей биографии нашего героя. Хватило нескольких строк текста, чтобы получилась Web-страница. Сохраним ее в файле 4.1.htm.
Теперь откроем первую нашу страницу (файл 3.1.htm). Сейчас мы создадим первую "внутрисайтовую" гиперссылку, т. е. гиперссылку, ведущую на другую страницу нашего сайта. Для этого сначала выделим строку "подробнее обо мне, любимом" (последняя строка списка). И обратим внимание на редактор свойств.
Рис. 4.1. Web-страница сведений об авторе
Вы уже заметили — справа от поля ввода адреса находятся две кнопки. Одна из них имеет вид мишени и расположена левее; она нам сейчас бесполезна. Вторая гораздо интереснее: она имеет вид папки и при нажатии открывает диалоговое окно Select File, показанное на рис. 3.41. В верхней части этого окна находится список файлов текущей папки и раскрывающийся список выбора папок, совсем как в стандартном диалоговом окне открытия файлов Windows. Вы должны будете выбрать нужный файл Web-страницы, чтобы создать на нее гиперссылку. Так мы и сделаем. И не забудьте нажать кнопку ОК. Вот и все — гиперссылка создана.
И обязательно сохраните нашу главную страницу. Частое сохранение документов (любых) — важнейшая и надежнейшая гарантия от потери данных. После этого главную страницу можно закрыть и сосредоточиться на сведениях об авторе.
Работа с графическими изображениями
Графические изображения (а также аудио- и видеоклипы), как вы помните, являются внедренными элементами, т. к. они не помещаются в сам HTML-код Web-страницы, а хранятся в отдельных файлах. Дело в том, что графика принципиально отличается от текста, кодируется и хранится иначе, чем текст. Поэтому совместить в одном файле HTML-текст и графику невозможно.
Примечание
Здесь нужно сделать оговорку. Существует язык VRML (Virtual Reality Markup Language — язык разметки виртуальной реальности), с помощью которого создаются целые виртуальные миры, которые можно исследовать. Эти миры записываются в виде текстовых тегов, аналогичных тегам HTML, встраиваемым прямо в HTML-код. Также фирмой Microsoft разработан язык VML (Vector Markup Language — язык разметки векторов), служащий для создания графических изображений, тоже в виде текстовых тегов. Но этот язык распространен очень слабо и поддерживается пока только Internet Explorer, начиная с версии 5.0.
Два вида графических изображений
Все графические изображения делятся на две большие группы по принципу кодирования, хранения в файлах и отрисовки на устройствах вывода (экран, принтер и т. п.). Давайте их рассмотрим.
Растровые изображения представляют собой набор точек; каждая такая точка может иметь какой-либо цвет, от белого до черного. Цвета всех точек, составляющих подобное изображение, записываются в массив, который, в свою очередь, вместе с некоторой служебной информацией сохраняется в файле. Такой массив называется растром.