<Вернуться назад :: Следующий урок>

Учебник по Macromedia Dreamweaver MX

Урок 1. Начинаем с текста

В этой главе мы, собственно, и начнем работу с Dreamweaver. На первый раз мы не будем усложнять себе жизнь и ограничимся простейшей Web-страницей с краткими сведениями об авторе и набором ссылок на другие, пока еще не существующие страницы Web-сайта.Здесь мы будем работать с текстом — самым важным составляющим современных Web-страниц. Представьте, что вы работаете в вашем любимом текстовом редакторе, и — вперед!
Создание новой Web-страницы
Но сначала нужно создать новую Web-страницу.Как вы помните, для этого нужно выбрать пункт New в меню File или нажать комбинацию клавиш <Ctrl>+<N>. После этого появится диалоговое окно New
Document (рис. 3.1).
Dreamweaver MX поддерживает создание Web-страниц на основе шаблонов. Шаблон — это особым образом подготовленная и сохраненная Web-страница, на которой уже имеются некоторые элементы, которые вам могут понадобиться (сведения об авторских правах, название и т. п.). Вам останется только добавить основной текст и немного исправить оформление — и готовая профессионально оформленная страница у вас в руках. Если
вам нужно быстренько "сляпать" страничку с каким-то текстом, шаблоны — настоящая находка.Однако настоящее творчество не терпит суеты. Поэтому давайте начнем с чистого листа и, не торопясь, создадим свой Web-шедевр.
Взгляните на рис. 3.1. Вы видите, что слева расположен список Category, где вы выбираете категорию шаблонов. Сами шаблоны, относящиеся к выбранной категории, перечислены в списке Basic Page. А внешний вид выбранного шаблона во многих случаях можно просмотреть в расположенной справа панели предварительного просмотра.

Рис. 3.1. Диалоговое окно New Document
Итак, нам нужен "пустой" шаблон. Выберем в списке Category пункт Basic
Page, а в списке Basic Page — пункт HTML, после чего нажмем кнопку ОК.
На экране появится пустое окно документа. Новая Web-страница создана.
Ввод текста
Вот и наступила торжественная минута! Сейчас мы наберем наш первый
текст в окне документа Dreamweaver (рис. 3.2).
Набрав текст, сразу же сохраним его в файле под именем 3.1.htm. И
поместите ее в отдельную папку — так будет проще управляться со всем
нашим Web-хозяйством.

Рис. 3.2. Наш первый текст
Вы уже знаете, что одна из Web-страниц на Web-сервере задается в
качестве страницы по умолчанию. Также вы знаете, что такая страница
обычно носит имя default или index (и расширение htm или html). Но в данном случае мы пренебрегли этим соглашением, хотя наша первая страница так и просится быть страницей по умолчанию. Давайте назовем ее 3.1.htm — таким образом, мы не запутаемся в дальнейшем во множестве разнокалиберных страниц, названных как бог на душу положит. Не беспокойтесь по поводу нарушения соглашений — это ненадолго.
Итак, мы создали первую нашу Web-страницу... Ах да, мы же совсем забыли о названии! Помните название, задаваемое тегом <TITLE>, которое не отображается в окне Web-обозревателя, но выводится в его заголовке. Кроме того, это название помещается в списке "истории"
Web-обозревателя, где содержатся названия и адреса всех посещенных в
течение некоторого времени страниц. Давайте зададим его для удобства
будущих посетителей сайта. Тем более что это делается очень просто:
наберите его в поле ввода, находящемся в инструментарии документа (рис. 3.3).

Рис. 3.3. Поле ввода названия Web-страницы в инструментарии документа
Сохраним нашу страницу еще раз. И посмотрим на нее критически. Чего ей не хватает?Конечно, вы уже посетили много Web-сайтов. И вы видели, как красочно они оформлены. По сравнению с ними наша первая страничка выглядит не просто бледно — она совсем никак не выглядит. Давайте приведем ее в пристойный вид.
Форматирование абзацев
Прежде всего, давайте сделаем нашей странице нормальный "кричащий"
заголовок. (Имеется в виду не HTML-заголовок, а обычный заголовок, как у газеты.) Первой строкой как раз набрано "Здравствуйте" — она прекрасный кандидат в заголовки.Чтобы отформатировать текстовый абзац как заголовок, нужно воспользоваться редактором свойств, точнее, раскрывающимся списком форматов абзаца. Он показан на рис. 3.4.
Пункт Paragraph этого списка форматирует текст как обычный абзац
(отмечаемый тегом <Р>). Пункты Heading 1, ..., Heading 6 позволяют
превратить его в заголовок, соответственно, первого, второго уровня и т. д.
Пункт Preformatted превращает абзац в текст фиксированного формата,
где форматирование задано не тегами HTML, а как в обычном тексте:
отступы создаются пробелами, а разбиение на абзацы — символами
возврата каретки и перевода строки. Это может быть очень полезно при
выкладывании в Сеть больших текстовых документов, созданных в старых
текстовых редакторах, без сложного HTML-форматирования.

Рис. 3.4. Раскрывающийся список форматов абзаца, находящийся в
редакторе свойств

Рис. 3.5. Созданный нами заголовок
Примечание
Заголовки создаются парными тегами <нп>, где л — число от 1 до 6.
Текст фиксированного формата задается парным тегом <PRE>.
Поставим текстовый курсор на строку "Здравствуйте" и выберем в меню
форматов пункт Heading 1 — это наилучшим образом подходит для
приветствия. Получившийся результат показан на рис. 3.5.
Если вы закрыли редактор свойств, не беспокойтесь — то же самое вы
можете сделать, используя главное меню или контекстное меню окна
документа. В первом случае выберите в меню Text пункт Paragraph Format и в появившемся на экране подменю — нужный формат абзаца. Во втором случае щелкните правой кнопкой мыши на строке приветствия, также выберите пункт Paragraph Format и в подменю — формат абзаца.
Если же вы предпочитаете не отрывать пальцы от клавиатуры, можете
задать формат заголовка комбинацией клавиш <Ctrl>+<n>, где <n> — одна из клавиш <1>, ..., <6>. Формат обычного абзаца можно задать, нажав
комбинацию клавиш <Ctrl>+<Shift>+<P>.
Теперь давайте выровняем заголовок по центру. В этом нам помогут кнопки выравнивания редактора свойств (рис. 3.6).

Рис. 3.6. Кнопки выравнивания, расположенные в редакторе свойств
Эти кнопки задают выравнивание соответственно (порядок перечисления
слева направо):
-по левому краю;
-по центру;
-по правому краю;
-выравнивание по обоим краям (полное выравнивание).
Внимание!
Полное выравнивание поддерживается только новыми версиями
Web-обозревателей.
Одновременно может быть нажата (включена) только одна из этих кнопок
либо ни одной. (В последнем случае задается так называемое выравнивание по умолчанию, как правило, по левому краю.) Такие кнопки называются кнопками-переключателями, по аналогии с пунктами-переключателями меню.
Итак, снова установим текстовый курсор на заголовок и нажмем кнопку
выравнивания по центру. На рис. 3.7 показано, что у нас получится в этом
случае.

Рис. 3.7. Центрированный заголовок
Аналогичного результата вы можете достигнуть, воспользовавшись
подменю Align меню Text или аналогичным подменю контекстного меню.
Пункт-переключатель Left задает выравнивание по левому краю, Center — по центру, Right — по правому краю, a Justify — полное выравнивание.
Также вы можете нажать комбинацию клавиш <Сtrl>+<Аll>+<Shift>+<клавиша>, где <клавиша> — <L>, <C>, <R> или <J>,
соответственно.
Примечание
Выравнивание задается значением атрибута ALIGN тегов <р> и
<Hn>. Доступны значения left, center, right или justify. Что они
означают, вы уже знаете.
Теперь давайте как-нибудь выделим последнюю строку со сведениями об
авторских правах. Можно поставить текстовый курсор в ее начало и нажать клавишу <Enter>, чтобы вставить между этой строкой и остальным текстом дополнительную пустую строку. А можно поступить по-другому.
Взгляните на кнопки, показанные на рис. 3.8. Эти кнопки позволяют
установить или убрать отступ слева у абзаца. Левая кнопка уменьшает
(убирает) отступ, а правая — увеличивает.

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

Рис. 3.9. Строка с отступом
Аналогичный результат дают пункты Outdent и Indent меню Text или
подменю List контекстного меню. Вы также можете нажать комбинацию
клавиш <Ctrl>+<Shift>+<]> для увеличения отступа и <Ctrl>+<Shift>+<[> — для его уменьшения.
Примечание
Отступ задается парным тегом <BLOCKQUOTE>.
Теперь обратим внимание на список тем, доступных на сайте. (Из строк этого списка потом будут сделаны гиперссылки, указывающие на соответствующие страницы.) И вспомним, что "обычные" текстовые редакторы поддерживают создание нумерованных и маркированных списков. Пункты нумерованных (упорядоченных) списков, как вы знаете, обозначаются порядковыми номерами, а пункты маркированных (неупорядоченных) списков -какими-либо значками. Давайте и мы создадим такой список.Для этого, прежде всего, выделите все строки, которые войдут в список. Всего их три.
Для того чтобы преобразовать выделенные строки в список, опять
воспользуемся кнопками редактора свойств. Они показаны на рис. 3.10.
Левая кнопка создает маркированный список, а правая — нумерованный. В данный момент времени может быть нажата только одна кнопка либо ни
одной; в последнем случае абзац возвращается к своему обычному виду.

Рис. 3.10. Кнопки создания списков, расположенные в редакторе свойств
Нажмите левую кнопку. Созданный нами маркированный список показан на
рис. 3.11.

Рис. 3.11. Маркированный список
В меню Text и в контекстном меню предусмотрено специальное подменю
List, выполняющее те же действия. В табл. 3.1 описаны все
пункты-переключатели этого подменю. Каких-либо комбинаций клавиш для
них не предусмотрено.
Таблица 3.1. Пункты подменю List

Кроме того, вы получаете возможность изменить некоторые
дополнительные параметры списка. Для этого нажмите кнопку List Item на
панели редактора свойств (рис. 3.12). На экране появится диалоговое окно
List Properties (рис. З.1З). Давайте рассмотрим это окно подробнее.

Рис. 3.12. Кнопка доступа к дополнительным свойствам списков

Рис. 3.13. Диалоговое окно List Properties
Раскрывающийся список List Type позволяет задать тип списка. Здесь
доступны следующие позиции:
Bulleted List — маркированный список;
Numbered List — нумерованный список;
Directory List — список папок, визуально похож на маркированный
список;
Menu List — список-меню, визуально опять же похоже на
маркированный список.
Если выбран первый или второй пункт, становятся доступными другие
элементы управления.
Раскрывающийся список Style позволяет задать стиль маркера или
нумерации списка. Если выбран маркированный список, доступны следующие
значения:
Bullet — кружок с заливкой;
Square — квадратик;
[Default] — маркер по умолчанию, обычно кружок с заливкой.
Если же выбран нумерованный список, доступны:
Number — арабские цифры;
Roman Small — малые римские цифры;
Roman Large — большие римские цифры;
Alphabet Small — малые латинские буквы;
Alphabet Large — большие латинские буквы;
[Default] — нумерация по умолчанию, обычно арабские цифры.
Кроме того, если выбран нумерованный список, доступно поле ввода Start
Count, где вы сможете ввести номер, с которого начнется нумерация строк списка.Все эти настройки относились к списку в целом. В нижней половине окна расположена группа элементов управления List Item, затрагивающая только ту строку списка, на которой находится текстовый курсор. В эту группу входят раскрывающийся список New Style и поле ввода Reset Count To, аналогичные раскрывающемуся списку Style и полю ввода Start Count верхней части окна.
Закончив настройку свойств, нажмите кнопку ОК для сохранения установок
или Cancel — для отказа от них.
Вы можете немного "поиграться" с этими дополнительными настройками,
чтобы узнать их получше. Лишняя практика никогда не повредит.
Примечание
Списки задаются парными тегами <ul> (маркированный), <оl>
(нумерованный), <DIR> (список папок) и <MENU> (меню). Между этими
тегами помещаются отдельные строки, задаваемые тегом <li>.
Удивительно, но у тега <li> нет пары!
Создание почтовых гиперссылок
Гиперссылку, указывающую на почтовый адрес, нужно записать особым образом.Давайте придумаем почтовый адрес, который может
быть у нашего гипотетического Web-дизайнера Ивана Иванова:
ivanov@somemail.ru
Немного теории. Почтовый адрес состоит из имени почтового ящика и имени сервера почты, разделенных символом "@" ("коммерческое эт", также известен как "собака", "ухо" или "улитка"). Вы можете провести аналогии между номером абонементного ящика и адресом почтового отделения, где этот ящик находится. Значок "коммерческое эт" - первый признак, что перед нами почтовый адрес.
Согласно стандарту HTML, этот почтовый адрес должен быть записан так:
mailto:ivanov@somemail.ru причем между двоеточием после "mailto" и
собственно адресом не должно быть пробела.
В последнем абзаце, где говорится об авторских правах, есть имя автора.
Из него-то мы и сделаем гиперссылку, указывающую на почтовый адрес. Для этого выделим имя автора и введем почтовый адрес в приведенном выше формате в поле адреса редактора свойств. После нажатия клавиши <Enter> мы получим результат, показанный на рис. 3.43.

Рис. 3.43. Гиперссылка, указывающая на почтовый адрес
Как видите, эта гиперссылка внешне ничем не отличается от сделанной нами ранее. Фактически, гиперссылки, указывающие на Web-страницы и почтовые адреса, ничем не отличаются друг от друга. И чтобы не обескуражить пользователя, вам придется самим дать понять ему, что он получит в результате. Вы можете написать где-то в тексте, что это почтовый адрес, или сделать что-то еще.
К несчастью, из-за ошибки в Dreamweaver невозможно отредактировать
почтовый адрес, помещенный в гиперссылку. Если вы выберете пункт
Change Link в меню Modify (или нажмете комбинацию клавиш <Ctrl>+<L>),
то вместо полного адреса в диалоговом окне Select File появится только
адрес почтового сервера. Так что вам для этих целей лучше воспользоваться редактором свойств.
Есть еще один способ создать гиперссылку, указывающую на почтовый
адрес, более элегантный. Для этого необходимо либо переключиться на
страницу Common панели объектов и щелкнуть кнопку Email Link (рис. 3.44), либо выбрать пункт Email Link в меню Insert. В результате этих действий на экране появится небольшое диалоговое окно Email Link, показанное на рис. 3.45.

Рис. 3.44. Кнопка Email Link панели объектов

Рис. 3.45. Диалоговое окно Email Link
В поле Text самим Dreamweaver подставляется текст, который будет
являться содержимым гиперссылки — имя, выделенное нами в окне
документа. К сожалению, при этом Dreamweaver портит русский текст,
превращая его в набор невразумительных черточек и квадратиков, так что
вам, скорее всего, придется ввести его заново. В поле E-Mail вам нужно
будет ввести почтовый адрес, причем ввести его нужно без "mailto:". После
этого остается нажать кнопку ОК для создания гиперссылки или Cancel —
для отказа от этого.
Проверка совместимости 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, позволит вам в будущем избежать серьезных
проблем с совместимостью.

<Вернуться назад :: Следующий урок>