3. Текст

Дополнительные возможности Dreamweaver

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

Использование цветовых схем

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

Цветовые схемы выбираются в диалоговом окне Set Color Scheme Command. Чтобы вызвать его, выберите пункт Set Color Scheme в меню Command. Это окно показано на рис. 3.51.

Процесс выбора цветовой схемы состоит из двух шагов. Сначала вы должны выбрать одну из категорий цветовых схем, называемых по цвету фона страницы: Black, Blue, Brown, ..., Yellow. Категория выбирается в списке Background, после чего в списке Text and Links появляются имена собственно категорий, из которых вы можете выбрать любую.

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

Нажав кнопку Apply, вы можете применить выбранную вами цветовую схему без закрытия диалогового окна. Чтобы закрыть это окно, нажмите кнопку ОК для сохранения выбранных установок или Cancel — для отказа от них.

Попробуйте поэкспериментировать с предлагаемыми Dreamweaver цветовыми схемами. Может быть, какая-то из них вам понравится.

Вставка и чтение комментариев

Вот и все. На этом этапе мы закончили. Наша Web-страничка уже полностью функциональна; осталось только написать остальные четыре страницы и связать их с главной.

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

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

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

Вставить комментарий проще всего из панели объектов. Для этого переключитесь на страницу Common и нажмите кнопку Comment (рис. 3.52). На экране появится диалоговое окно Comment, показанное на рис. 3.53.

Это окно устроено очень просто. Вы вводите текст комментария в область редактирования Comment и нажимаете кнопку ОК для вставки комментария или Cancel — для отмены. После этого в конце третьего абзаца появится значок комментария, отображаемый в таких случаях Dreamweaver (рис. 3.54).

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

Для вставки комментария вы также можете выбрать пункт Comment подменю Text Objects меню Insert.

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

Чтобы впоследствии удалить ненужный комментарий, просто выделите мышью его значок и нажмите клавишу <Del>.

Примечание

Комментарии вставляются в HTML-код с помощью пары тегов <! —...—> или

<COMMENT>...</COMMENT>.

Вставка даты

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

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

Поскольку создаваемая нами Web-страница очень проста, мы не будем ставить на ней дату обновления. Вместо этого создадим пустую Web-страницу и вставим дату в нее, для чего переключимся на страницу Common панели объектов и нажмем кнопку Date (рис. 3.56). Вы также можете выбрать пункт Date меню Insert. После этого на экране появится диалоговое окно Insert Date, показанное на рис. 3.57.

Раскрывающийся список Day Format для нас бесполезен, т. к. представляет все имена дней недели по-английски. Поэтому оставьте выбранным пункт [No Day].

В списке Date Format выбирается формат даты. Выберите один из двух форматов "число.месяц.год", которые там есть.

Раскрывающийся список Time Format задает формат времени. Выберите пункт 22:18, если вы хотите отображать время в 24-часовом формате, пункт 10:18 РМ, если хотите видеть время в 12-часовом формате, или пункт [No Time], если время вам вообще не нужно.

Флажок Update Automatically on Save включает или отключает режим обновления даты при сохранении страницы.

Как обычно, кнопка ОК выполняет вставку даты, а кнопка Cancel — отменяет.

Для нашего примера выберите один из вышеуказанных форматов даты в списке Date Format, пункт 22:18 — в раскрывающемся списке Time Format и включите флажок Update Automatically on Save. He забудьте нажать кнопку OK! После этого на страницу будет помещена сегодняшняя дата.

Если вы при вставке даты включили флажок Update Automatically on Save, Dreamweaver позволит вам изменить формат даты и (или) времени. Выделите вставленную дату — и редактор свойств изменит свой вид, предоставив вам кнопку Edit Date Format. При нажатии на нее на экране появится диалоговое окно Insert Date (см. рис. 3.57), в котором вы сможете изменить формат даты и времени.

Теперь испытаем Dreamweaver. Для этого сохраним страницу, скажем, под именем 3.4.htm. После этого вы, наверно, заметите, что время, которое вы поместили на страницу вместе с датой, изменится. (Если этого не случится, подождите минуты две и потом снова сохраните страницу.) То есть, таким образом, Dreamweaver действительно обновляет дату и время при сохранении страницы.

"Чистка" HTML-кода

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

• удаление парных тегов, "потерявших" свою пару;
• удаление лишних (избыточных) тегов. Такие теги могут включаться в код для того, чтобы сделать его совместимым со старыми браузерами;
• объединение тегов, где это возможно;
• удаление комментариев.

За "чистку" HTML-кода "отвечает" пункт Clean Up HTML меню Command, выбрав который, вы откроете диалоговое окно Clean Up HTML / XHTML, показанное на рис. 3.58.

Группа флажков 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-код нашей страницы и так был "чист". Закройте это окно нажатием кнопки ОК.

Проверка совместимости HTML-кода

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

Как избежать проблем с совместимостью? Что нужно для этого делать?

Прежде всего, конечно, соблюдать все стандарты HTML. He кидаться сломя голову за новомодными, свежевведенными расширениями этих самых стандартов и, тем более, нестандартными, "фирменными" возможностями той или иной программы. Иначе вы можете сильно сузить свою аудиторию. Кроме того, фирмы Microsoft и Netscape разработали ряд рекомендаций для Web-дизайнеров, которые позволят им создавать специальные, "совместимые" страницы, одинаково хорошо (или, по крайней мере, сносно) отображаемые в большинстве программ. Рекомендуем вам ознакомиться с этими рекомендациями, хотя в конкретных случаях помощи от них не так уж и много, и вам придется изрядно поломать голову.

Но как узнать, будет ли данная Web-страница нормально отображаться в разных браузерах? Вам поможет в этом Dreamweaver.

Выберите пункт Check Target Browsers в подменю Check Page меню File. На экране появится диалоговое окно Check Target Browsers (рис. 3.60).

В списке Browsers представлены все программы, о которых "знает" Dreamweaver. Версия MX поддерживает разные версии Internet Explorer, Navigator и Opera; новейший Web-обозреватель Mozilla там отсутствует. Выберите нужные программы, щелкая мышью на соответствующих строках списка, после чего нажмите кнопку Check.

После довольно долгого ожидания Dreamweaver откроет особую панель Target Browser Check и выведет в ней результаты проверки страницы на совместимость (рис. 3.61) в виде списка. В колонке Description этого списка будет дано краткое описание найденной несовместимости, увы, на английском. Дважды щелкните мышью на нужной строке списка — и Dreamweaver, переключив окно документа в режим показа страницы и кода, подсветит проблемный HTML-тег.

Здесь сразу видно, что атрибут ALINK (цвет активной гиперссылки) тега <BODY> не поддерживается Opera. Конечно, это не смертельно — в целом наша первая Web-страничка совместима со всеми наиболее распространенными браузерами. Но эта функция, встроенная в Dreamweaver, позволит вам в будущем избежать серьезных проблем с совместимостью.

Что дальше?

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

В главе 4 мы научимся вставлять на страницы графические изображения, звуковые и видеоклипы. А заодно создадим страничку с более подробными сведениями о гипотетическом Иване Ивановиче и его портретом.