| Навигация |
| Это место может быть вашим |
Начиннаем с текста
Создание новой 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 на примере нашей первой 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
| Пункт | Описание |
| None Unordered List Ordered List Definition 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> нет пары!
Форматирование отдельных символов
Итак, мы научились форматировать целиком абзацы текста. Теперь поговорим, что можно сотворить с отдельными символами текста.
Все текстовые редакторы, например Microsoft Word или поставляемый в составе Windows WordPad, позволяют менять начертание и размер шрифта текста, делать его жирным, курсивным или подчеркнутым, а также менять его цвет. Все это доступно и в Dreamweaver. Нужно только иметь в виду, что возможности HTML по форматированию текста сильно ограничены существующими стандартами.
Ладно, к делу.
Начнем с самого простого. Попытаемся сделать некоторые фрагменты текста нашей страницы жирными и курсивными. И помогут нам в этом две кнопки изменения начертания, показанные на рис. 3.14.
Рис. 3.14. Кнопки изменения начертания шрифта
Соответственно, левая (В) кнопка позволяет сделать шрифт жирным, а правая (I) — курсивным. Обе эти кнопки могут быть нажаты или отжаты независимо, т. е. текст может быть простым, жирным, курсивом или жирным курсивом.
Выделим слова "Иван Иванович Иванов" и нажмем кнопку В. Текст станет жирным. Теперь выделим полностью последнюю строку (со сведениями об авторских правах) и нажмем кнопку I. Последняя строка станет курсивной. Полученный результат можно увидеть на рис. 3.15.
Рис. 3.15. Жирный текст и курсивная строка
Вместо нажатия кнопки В вы можете выбрать пункт-выключатель Bold в подменю Style меню Text или контекстного меню. В том же подменю существует пункт Italic — аналог кнопки /. Вы также можете нажимать комбинации клавиш <Ctrl>+<B> и <Ctrl>+<!> соответственно.
А вот чтобы включить или вьючить подчеркивание текста линией, вам все равно придется воспользоваться пунктом-выключателем Underline подменю Style меню Text или контекстного меню. Ни кнопки, ни комбинации клавиш для этого не предусмотрено.
Вы могли заметить, что в подменю Style много пунктов. Давайте их рассмотрим.
Здесь нужно сказать, что все теги HTML, предназначенные для оформления текста, делятся на две большие группы. Теги физического форматирования просто говорят Web-обозревателю: "Сделай текст вот таким и не задавай лишних вопросов". Таким образом, если вы сделали текст жирным, то Web-обозреватель просто выведет его жирным шрифтом, не выполняя при этом никакой дополнительной обработки. Такие теги хороши тогда, когда вы не даете оформляемому с их помощью тексту никакого особого значения.
В отличие от них, теги логического форматирования дают тексту, составляющему их содержимое, какое-либо дополнительное значение. Например, вы можете превратить с помощью одного из этих тегов фрагмент текста в цитату. Web-обозреватель выведет ее особым шрифтом (как правило, курсивом, хотя, может и вообще никак не выделить) и, вместе с тем, может выполнить какую-то дополнительную обработку этого текста, например, вывести все цитаты, встретившиеся в странице, в отдельное окно. (Правда, ни один современный Web-обозреватель так не делает, но кто знает, что будет дальше...)
Выделение текста жирным и курсивным шрифтом, рассмотренное нами выше, выполняется с помощью тегов физического форматирования. В самом деле, мы просто по-другому выделили некоторые фрагменты текста нашей странички, не давая им какого-то особого значения. И Web-обозреватель нас прекрасно поймет.
Давайте же продолжим изучение подменю Style. В нем мы видим пункт-выключатель Strikethrough, включив который мы сделаем выделенный фрагмент текста зачеркнутым. Зачеркивание текста выполняется опять же с помощью тега физического форматирования, который мы рассмотрим чуть ниже.
А остальные пункты подменю Style задают именно логическое форматирование. В табл. 3.2 приведены все эти пункты и их краткие описания, а на рис. 3.16 — примеры текста, отформатированные с использованием соответствующих пунктов этого подменю. Вы можете сами сделать такой пример и поэкспериментировать с разными стилями текста; сохраните его в файле 3.2.htm.
Таблица 3.2. Пункты логического форматирования подменю Style
| Пункт | Описание |
| Teletype | Текст, выведенный устройством вывода компьютера ("телетайп") |
| Emphasis | Важный текст |
| Strong | Очень важный текст. Имеет большее значение, чем текст, отформатированный через Emphasis |
| Code | Используется для обозначения в тексте фрагментов исходного кода программы на каком-либо языке программирования (команд, имен переменных, ключевых слов и т. п.) |
| Variable | Используется для обозначения в тексте имен переменных программы на каком-либо языке программирования |
| Sample | Вывод какой-либо программы |
| Keyboard | Текст, который пользователь должен ввести с клавиатуры |
| Citation | Цитата |
| Definition | Термин, встречающийся в тексте первый раз |
Рис. 3.16. Примеры различного форматирования текста
с помощью пунктов подменю Style
В табл. 3.3 перечислены теги, вставляемые в HTML-код пунктами подменю Style.
Таблица 3.3. Теги, вставляемые в HTML-код пунктами подменю Style
| Пункт | Пара тегов |
| Bold | <в>. . .</в> |
| Italic | . . . |
| Underline | <u>. . .</u> |
| Strikethrough | <s>. . .</s> |
| Teletype | <TT>. . .</TT> |
| Emphasis | <EM>. . .</EM> |
| Strong | <STRONG>. . .</STRONG> |
| Code | <CODE>. . .</CODE> |
| Variable | <VAR>. . .</VAR> |
| Sample | <SAMP>. . .</SAMP> |
| Keyboard | <KBD>. . .</KBD> |
| Citation | <CITE>. . .</CITE> |
| Definition | <DFN>. . .</DFN> |
Теперь давайте зададим шрифт, которым набран наш текст. Делается это с помощью двух раскрывающих списков, расположенных в редакторе свойств. Разумеется, Dreamweaver предоставляет в ваше распоряжение также соответствующие пункты меню и комбинации клавиш. Для смены шрифта используется раскрывающийся список, показанный на рис. 3.17, а для смены размера шрифта— список, показанный на рис. 3.18. Но для того, чтобы понять, что же там отображается, нужно дать некоторые разъяснения.
Рис. 3.17. Раскрывающийся список смены шрифта
Рис. 3.18. Раскрывающийся список задания размера шрифта
Вспомним, зачем создавалась Всемирная паутина WWW. А именно, чтобы каждый человек, пользуясь любой компьютерной платформой, находясь в любой части света, смог прочитать любой HTML-документ. А т, к. разные компьютерные платформы имеют разные параметры видеоподсистемы, в частности разные стандартные шрифты, то задача одинакового отображения сильно усложняется. Поэтому HTML определяет несколько стандартных шрифтов, которые обязательно должны быть установлены на компьютере клиента, и несколько, а именно семь, размеров этих самых шрифтов. Конечно, вы можете использовать в своих Web-страницах другие шрифты, но тогда потрудитесь, чтобы они были установлены у пользователя. Впрочем, если на клиентском компьютере не будет того или иного шрифта, операционная система и Web-обозреватель используют ближайший максимально похожий из уже установленных шрифтов.
Наименования шрифтов в стандарте HTML могут записываться сразу несколько, через запятую. При этом если первого в списке шрифта на клиентском компьютере нет, Web-обозреватель ищет второй, третий и т. д., пока не доберется до стандартного шрифта, который уж точно должен там быть.
Посмотрите еще на рис. 3.17. В этом раскрывающемся списке присутствуют все стандартные шрифты, определенные HTML. Вы можете выбрать любой из них. Если же вас не устраивает ни один, то вы можете просто ввести туда название любого другого шрифта, установленного на вашем компьютере, например Impact, и нажать клавишу <Enter>. Естественно, вся ответственность за правильное отображение текста на клиентском компьютере в данном случае ляжет на вас.
Пункт Default Font этого списка сбрасывает шрифтовые установки, точнее, возвращает их к установкам родительского элемента.
Соответственно, в раскрывающемся списке размеров шрифта (рис. 3.18) отображены все доступные размеры шрифтов. Их семь, как уже и говорилось. Кроме того, в этом меню присутствуют пункты вида +n и —n, где n -число от 1 до 7. Выбор этих пунктов позволяет соответственно увеличить или уменьшить размер шрифта на п ступеней относительно шрифта родительского элемента. Пункт None позволит вернуть размер шрифта к установкам родительского элемента.
Перед тем как изменять наименование или размер шрифта, нужно выделить соответствующий фрагмент текста. Это вам уже знакомо: все уже известные вам команды форматирования текста работают таким же образом.
Давайте выделим имя нашего героя и увеличим его на два размера. Для этого выберем в раскрывающемся списке размера шрифта пункт +2. Полученный результат показан на рис. 3.19. Не правда ли, гипотетический Иван Иванович страдает манией величия?
Теперь сменим шрифт. Но не какого-то выделенного фрагмента, а ВСЕГО текста. Для этого выделим весь текст в окне. Конечно, для этого можно выбрать пункт Select All меню Edit или нажать комбинацию клавиш <Ctrl>+<A>. Но поступим по-другому. Вы, конечно, помните, что окно документа содержит так называемую секцию тегов (см. рис. 2.12). Давайте щелкнем мышью по кнопке <body>, чтобы выделить все содержимое страницы (содержимое тега <BODY>, как вы уже догадались).
Рис. 3.19. Увеличенный шрифт
Теперь, когда все содержимое документа выделено, выберите нужный шрифт. Для примера выберем пункт Verdana, Arial, Helvetica, sans-serif -любимый шрифт автора. (Конечно, автор не собирается навязывать вам свои эстетические вкусы — это просто для примера.) Результат показан на рис. 3.20.
Рис. 3.20. Web-страница после изменения шрифта
Задать шрифт вы также можете с помощью подменю Font, расположенного в меню Text и контекстном меню. Для смены размера шрифта Dreamweaver предоставляет целых два подменю: Size и Size Change. Оба они располагаются в меню Text. В контекстном меню они объединены в одно подменю Size. Никаких клавишных сочетаний для выполнения этих операций с клавиатуры не предусмотрено.
Теперь давайте выделим цветом название программного продукта, с помощью которого делается этот замечательный сайт. Снова обратим внимание на редактор свойств. На рис. 3.21 показан инструмент для задания цвета — так называемый селектор цвета.
Рис. 3.21. Селектор цвета Dreamweaver
Селектор цвета состоит из двух частей. Справа находится поле ввода, где вы можете ввести шестнадцатеричный код нужного цвета. Но вряд ли вы помните наизусть шестнадцатеричные коды ваших любимых цветов. Поэтому слева находится кнопка вызова окна выбора цвета, которое показано на рис. 3.22
Рис. 3.22. Окно выбора цвета селектора цветов
Большую часть этого окна занимает палитра, где, собственно, вы и ищете нужный цвет. При этом в небольшом текстовом поле, расположенном в центре верхней серой полосы окна, высвечивается шестнадцатеричный код цвета, над которым вы в данный момент держите курсор мыши. Это очень удобно: впоследствии вам уже не надо будет долго выбирать цвет из палитры — вы просто введете в поле ввода селектора его код. Если же ни один цвет из палитры вам не подходит, вы можете с помощью того же курсора мыши (имеющего вид пипетки) "взять" необходимый цвет откуда угодно: с рабочего стола, из любого окна, из любого элемента управления. Чтобы закрыть окно выбора цвета, нажмите клавишу <Esc>.
В правом верхнем углу расположены три кнопки.
Самая левая из них позволит вам быстро выбрать цвет, заданный по умолчанию
(обычно это цвет родительского элемента). Средняя кнопка вызывает на
экран стандартное диалоговое окно выбора цвета. А правая позволит вам
переключить режимы палитры выбора цвета. При нажатии на нее на экране
появляется дополнительное меню, предлагающее пять режимов:
Color Cubes и Continuous Tone — просто меняют внешний вид палитры;
Windows OS и Mac OS — позволяют выбрать палитру, специфичную для какой-либо
из операционных систем, в данном случае Microsoft Windows и Apple Macintosh;
Grayscale — выбирает черно-белую палитру.
Кроме того, это меню содержит еще один, шестой, изначально включенный пункт-выключатель Snap to Web Safe. Зачем он нужен?
Чтобы ответить на этот вопрос, снова поговорим о проблеме межплатформенной совместимости, которую пришлось решать создателям языка HTML и WWW.
Как вы уже знаете, разные компьютерные платформы... да что там! — даже разные компьютеры имеют различные параметры видеоподсистемы. Одни могут отображать всего шестнадцать цветов, а другие — все 16,7 миллиона, что с лихвой перекрывает цветовую разрешающую способность человеческого глаза. Разумеется, при таком богатом множестве компьютерных платформ Web-дизайнеру не стоит и рассчитывать, что все его цвета и оттенки будут отображены правильно везде. Поэтому стандарт HTML определяет так называемую безопасную палитру цветов, которая гарантированно должна отображаться правильно всеми программами на всех компьютерах. Web-дизайнерам рекомендуется придерживаться этой безопасной палитры (хотя никто им не запрещает ее игнорировать). Так вот, пункт Snap to Web Safe, включенный в дополнительное меню окна выбора цвета, и заставляет селектор цветов Dreamweaver "уважать" безопасную палитру и подгонять под нее все выбираемые пользователем цвета.
Примечание
Все цвета из палитр Color Cubes и Continuous Tone являются безопасными, цвета из других палитр — нет. Естественно, если вы выбрали какой-то цвет извне окна выбора цветов, он совсем не обязательно уложится в безопасную палитру.
Название изучаемой нами программы уже выделено, так что щелкнем по кнопке селектора цветов и выберем любой понравившийся цвет. Автор выбрал синий — он хорошо успокаивает нервы. Рисунок мы приводить не будем — все равно черно-белая иллюстрация не может передать цвет.
Если вы предпочитаете работать с меню, то для смены цвета шрифта воспользуйтесь пунктом Color меню Text. К сожалению, в этом случае вы не сможете обратиться к селектору цветов — Dreamweaver выдаст вам стандартное диалоговое окно выбора цвета Windows.
Примечание
Задание шрифта и цвета текста достигается с помощью тега <FONT>. . .</FONT>. Этот тег должен содержать один из атрибутов: COLOR, FACE или SIZE, задающих, соответственно, цвет, наименование шрифта и его размер. Как вы уже поняли, это тег физического форматирования.
Совет
Если вы посмотрите на секцию тегов, то увидите, что теги <FONT> вложены в теги <Р> и <LI>, т. е. являются дочерними тегами самого последнего уровня. Это из особенностей HTML: некоторые теги могут быть вложены друг в друга только в определенном порядке.
Что теперь делать? Давайте посмотрим на наш текст и подумаем. Скажем, не слишком ли выделяются слова "Иван Иванович Иванов", набранные огромным жирным шрифтом? Не нужно ли вернуть их к обычному шрифту? Щелкните правой кнопкой мыши где-нибудь на этих словах и выберите в контекстном меню пункт Remove Tag <font>. Dreamweaver тотчас удалит тег, задающий размер шрифта, но оставит его содержимое. Мы уже описывали этот пункт меню в главе 2, так что он должен быть вам знаком.
Вставка специальных символов
Чего нам еще не хватает для полного счастья?
Давайте отделим первый и второй абзацы от остального текста. Конечно, можно вставить пустую строку, но мы поступим лучше. И HTML (вкупе с Dreamweaver) нам в этом поможет.
Поставим текстовый курсор в начало третьего абзаца и нажмем кнопку Horizontal Rule (рис. 3.23), расположенную на вкладке Common панели объектов. Как показано на рис. 3.24, между вторым и третьим абзацами появится разделяющая их горизонтальная линия.
Вы также можете использовать пункт Horizontal Rule меню Insert.
Рис. 3.23. Кнопка Horizontal Rule панели объектов
Рис. 3.24. Горизонтальная линия
Щелкните мышью по горизонтальной линии — она будет выделена целиком. После этого обратите внимание на редактор свойств. Вместо свойств текста и шрифта там будут отображены свойства горизонтальной линии, которые вы, конечно же, можете изменить (рис. 3.25).
Рис. 3.25. Вид редактора свойств при выделенной горизонтальной
линии
Давайте подробно опишем все элементы управления
редактора свойств, доступные в этом случае:
поле ввода W позволяет задать ширину горизонтальной линии в пикселах
или процентах от всей ширины родительского элемента, в данном случае
страницы. По умолчанию горизонтальная линия занимает всю ширину страницы.
Единица измерения задается в раскрывающемся списке, расположенном справа
от поля ввода; доступны пункты pixels (пикселы; этот вариант указан
по умолчанию) и %
поле ввода Н позволяет задать толщину горизонтальной линии в пикселах.
Значение по умолчанию — 2;
раскрывающийся список Align задает выравнивание линии. Эти установки
имеют смысл только в том случае, если ширина линии меньше ширины родительского
элемента. Доступны значения: Default (выравнивание по умолчанию; такое
же, как у родительского элемента), Left (по левому краю), Center (по
центру) и Right (по правому краю);
флажок Shading позволяет включить или отключить "трехмерность"
линии. По умолчанию он включен.
Давайте зададим ширину линии, равную 50%. Для этого выберите в раскрывающемся списке единиц измерения проценты (пункт %), введите в поле ввода W число 50 и нажмите клавишу <Enter>. Результат показан на рис. 3.26.
Рис. 3.26. Новый вид горизонтальной линии
Примечание
Горизонтальная линия вставляется в текст с помощью одинарного тега <нк>. Этот тег может содержать атрибуты ALIGN, COLOR, NOSHADE, SIZE и WIDTH, задающие, соответственно, выравнивание, цвет, "трехмерность", толщину и ширину. Заметьте, что, хотя тег <HR> и поддерживает атрибут COLOR, Dreamweaver не позволит вам задать цвет горизонтальной линии в редакторе свойств или как-либо еще. Хотя вы всегда можете отредактировать HTML-код вручную.
Внимание!
Среди атрибутов тега <HR> особняком стоит NOSHADE. Этот атрибут не имеет значения (так называемый атрибут без значения), а просто либо присутствует, либо не присутствует в теге. В первом случае он отменяет "трехмерность" линии, а во втором — разрешает.
Теперь посмотрим на последнюю строку нашего текста, содержащую сведения об авторских правах. Общепринятым стандартом стало использование значка "©" для обозначения авторских прав. У нас же — длинный невразумительный текст. Давайте заменим его коротким и приметным значком.
Сначала выделим слова "Авторские права принадлежат мне," (не забыв и запятую), которые мы заменим значком "©", и удалим. После этого переключимся на страницу Characters панели объектов. Нас интересует кнопка Copyright (рис. 3.27).
Рис. 3.27. Кнопка Copyright панели объектов
Поставьте на нужное место текстовый курсор и щелкните эту кнопку. Dreamweaver выведет небольшое предупреждение (рис. 3.28), говорящее о том, что данный символ может не отобразиться корректно в случае использования некоторых кодировок. Закройте его, нажав кнопку ОК. Если вы больше не хотите, чтобы оно выводилось на экран в дальнейшем, перед закрытием включите флажок Don't show me again.
Рис. 3.28. Панель специальных символов
На рис. 3.29 показан вставленный символ "©". Не забудьте также исправить фамилию нашего персонажа.
Рис. 3.29. Символ "©"
Здесь мы столкнулись с так называемыми специальными символами HTML. Эти символы из соображений все той же совместимости не могут быть просто так вставлены в код HTML, а заменяются либо числовыми кодами, либо мнемоническими обозначениями. В частности, символ "©" обозначается в HTML-коде как &сору;.
Для вставки знака "©" вы также можете воспользоваться пунктом Copyright подменю Special Characters меню Insert.
Остается добавить в текст нашей страницы грозную фразу, предупреждающую всех желающих процитировать что-либо с настоящего сайта о том, что перед этим нужно справиться у владельца авторских прав на сайт. Допишем эту фразу в конце последней строки...
Стоп! Необходимо не просто дописать такую фразу, а как-то отделить ее от собственно сведений об авторских правах. Но как? Можно вставить горизонтальную линию, но тогда последняя строка растянется по вертикали, что будет выглядеть громоздко и некрасиво. Можно нажать клавишу <Enter> и сделать второй абзац, но получается все равно слишком громоздко (видели расстояние между абзацами?). Хотелось бы дописать эту фразу второй строкой, но в том же самом абзаце.
И на этот случай HTML (и Dreamweaver) предлагает решение. Речь идет о так называемом разрыве строк — особом теге, заставляющем все следующие за ним символы переноситься на новую строку. При этом он не создает нового абзаца, что нам и надо.
Поставьте курсор в конец строки со сведениями об авторском праве. После этого нажмите кнопку Line Break (рис. 3.30) на вкладке Characters панели объектов. Курсор тотчас перескочит на новую строку. Допишите нужную фразу. У вас должно получиться то, что изображено на рис. 3.31.
Рис. 3.31. Использование разрыва строк
Вы также можете для вставки разрыва строк использовать пункт Line Break подменю Special Characters меню Insert или — что проще всего — комбинацию клавиш <Shift>+<Enter>.
И последний штрих. Во втором абзаце нашего текста есть такая фраза: "А это — мой личный Web-сайт". Здесь используется тире. А по правилам полиграфии тире нельзя переносить на другую строку. Web-обозреватель об этом не знает и при недостатке свободного места все же перенесет тире, в результате чего текст будет выглядеть очень неаккуратно.
Чтобы этого не было, между словом "это" и тире нужно вставить неразрывный пробел. Что бы ни случилось, Web-обозреватель никогда не будет переносить строку по этому пробелу.
Прежде всего, уберите пробел между словом "это" и тире и поставьте там текстовый курсор. После этого нажмите на вкладке Characters панели объектов кнопку Non-Breaking Space (рис. 3.32). Вот и все.
Рис. 3.32. Кнопка Non-Breaking Space панели объектов
Для вставки неразрывного пробела вы также можете использовать пункт Non-Breaking Space подменю Special Characters меню Insert или сочетание клавиш <Сtrl>+<Shift.>+<Пробел>.
Примечание
Неразрывный пробел — это специальный символ, обозначаемый кодом .
Взгляните снова на вкладку Characters панели объектов. Мы описали не все специальные символы, которые можно вставить в документ с ее помощью. В табл. 3.4 описаны все остальные символы.
Таблица 3.4. Специальные символы, доступные на вкладке Characters панели объектов
| Символ | Описание | Пункт подменю Special Characters меню Insert |
| II | Левая кавычка | Left Quote |
| II | Правая кавычка | Right Quote |
| — | Длинное тире | Em-Dash |
| £ | Фунт стерлингов | Pound |
| ? | Евро | Euro |
| ® | Зарегистрированная торговая марка | Registered |
| tm | Торговая марка | Trademark |
| ¥ | Иена | Yen |
С помощью кнопки Other Characters (рис. 3.33) можно вставить в документ любой доступный в HTML специальный символ. При нажатии на нее на экране появится диалоговое окно Insert Other Character, показанное на рис. 3.34. Вам необходимо будет щелкнуть по кнопке, соответствующей нужному символу, и нажать кнопку ОК для его вставки или Cancel — для отказа от этого.
Рис. 3.33. Кнопка Other Characters панели объектов
Рис. 3.34. Диалоговое окно Insert Other Character
Для вызова диалогового окна вставки символа вы также можете использовать пункт Other подменю Special Characters меню Insert.
Использование HTML-стилей
Очень и очень многие мощные текстовые редакторы предлагают пользователю так называемые стили, т. е. описания формата фрагментов текста, имеющие имя и сохраненные отдельно от редактируемого документа. Выделив фрагмент текста и выбрав стиль, пользователь может мгновенно применить к этому фрагменту все стилевые настройки: шрифт, выравнивание, цвет текста и т. п. Если же пользователю потребуется быстро изменить форматирование текста, он может просто отредактировать стиль — и все его настройки будут мгновенно применены к тем фрагментам, к которым ранее был присвоен этот стиль.
К сожалению, HTML не поддерживает стили. Dreamweaver выходит из этого положения, задавая свои стили, называемые HTML-стилями. Со стилями, скажем, Microsoft Word они имеют мало общего, в частности, фрагмент текста не может хранить имя стиля, который был к нему применен. Вдобавок, с помощью HTML-стилей можно задать только шрифтовые настройки, цвет текста и выравнивание абзаца. Однако HTML-стили во многих случаях помогут быстро отформатировать текст.
Поищите в доке панель под названием HTML Styles (рис. 3.35). Если ее нет, выберите пункт HTML Styles меню Window или нажмите комбинацию клавиш <Ctrl>+<Fll>.
Рис. 3.35. Панель HTML Styles
Большую часть этой панели занимает собственно список HTML-стилей. Кроме пунктов, задающих определенные вами HTML-стили, там есть еще два: Clear Selection Style и Clear Paragraph Style. Они выполняют одинаковую задачу — удаляют всякое HTML-форматирование фрагмента текста. Но почему их два? И чем они различаются?
Прежде чем дать ответ на этот вопрос, еще немного поговорим о HTML-стилях.
Как и в обычных текстовых редакторах, HTML-стиль Dreamweaver может применяться либо к выделенному фрагменту текста, либо к абзацу целиком; в первом случае он называется стилем символов, а во втором — стилем абзаца. При создании HTML-стиля вы задаете, к чему он будет применен. Так вот, пункт Clear Selection Style удаляет HTML-форматирование выделенного текста, a Clear Paragraph Style — всего абзаца.
Вы можете испытать эти пункты списка в действии. Для этого выделите, скажем, имя нашего героя и выберите пункт Clear Selection Style. Вы увидите, что жирное выделение имени сразу же пропадет. Теперь поставьте текстовый курсор на какой-либо абзац, например на последнюю строку со сведениями об авторских правах, и выберите пункт Clear Paragraph Style. Произойдет то же самое, за тем исключением, что останется отступ. Сделайте дважды операцию отмены (либо выберите пункт Undo меню Edit, либо нажмите комбинацию клавиш <Ctrl>+<Z>), чтобы вернуть все, как было.
Теперь взглянем снова на панель HTML Styles. В ее левом нижнем углу находится флажок автоматического применения стилей Auto Apply. Когда он включен (а он включен по умолчанию), выбираемые в списке HTML-стили применяются сразу же после выбора. Если вы его отключите, то для того, чтобы применить стиль, вам нужно после его выбора в списке щелкнуть кнопку Apply, находящуюся правее этого флажка, выбрать пункт Apply контекстного меню списка стилей или дополнительного меню панели или просто нажать клавишу <Enter>. Это может быть полезно, например, когда вы часто редактируете HTML-стили и не хотите, чтобы выбранный стиль применялся сразу же.
Так как же создавать HTML-стили? Очень просто.
Здесь есть две возможности: вы можете создать стиль "с нуля" и скопировать его с уже отформатированного и выделенного фрагмента текста. Второй способ намного проще первого, поэтому мы рассмотрим его в первую очередь.
Давайте создадим HTML-стиль под названием Имя, представляющий имя автора сайта. Для этого выделим в окне документа текст имени и нажмем в окне HTML-стилей кнопку New Style (рис. 3.36), находящуюся в правом нижнем углу панели. Вы также можете либо выбрать пункт New в дополнительном меню панели, либо выбрать этот же пункт в контекстном меню списка стилей панели. Так или иначе на экране появится диалоговое окно Define HTML Style, показанное на рис. 3.37.
Рис. 3.36. Кнопка New Style панели HTML Styles
Рис. 3.37. Диалоговое окно Define HTML Style
В поле ввода Name вводится имя стиля. Введем сюда слово имя.
С помощью группы переключателей Apply To задается тип HTML-стиля: Selection задает стиль символов, a Paragraph — стиль абзаца. Сейчас включен переключатель Selection, оставим его включенным.
Группа переключателей When Applying позволяет определить, что произойдет, если этот стиль будет применен к фрагменту, уже отформатированному средствами HTML: Add to Existing Style добавляет новое форматирование к существующему, Clear Existing Style удаляет старое форматирование перед добавлением нового. Оставим переключатель Clear Existing Style включенным.
Группа элементов управления Font Attributes задает параметры шрифта. Раскрывающийся список Font задает наименование шрифта, Size — размер, селектор цвета Color позволяет выбрать цвет текста, а кнопки-выключатели В и /делают шрифт жирным и курсивным соответственно. Также доступна кнопка Other, при нажатии которой появляется меню, из которого вы можете выбрать дополнительные виды HTML-форматирования текста (в основном, это теги логического форматирования). Здесь мы также ничего не трогаем.
Закончив, нажимаем кнопку ОК, чтобы сохранить вновь созданный стиль. Кнопка Cancel позволит отказаться от этого, а кнопка Clear сбрасывает все настройки стиля в состояние по умолчанию. Так или иначе, мы создали наш первый HTML-стиль. После этого в списке стилей появится новая строка "Имя". Левее имени стиля мы увидим букву а, обозначающую стиль символов.
Создадим теперь еще один стиль, но на этот раз — стиль абзаца, а именно абзаца со сведениями об авторских правах. И на этот раз, "с нуля". Для этого уберем всякое выделение с текста в окне документа и снова нажмем кнопку New Style панели стилей. В появившемся диалоговом окне Define HTML Style в поле Name введем "Права", включим переключатель Paragraph, включим кнопку-переключатель / и отключим В, а в раскрывающемся списке Size выберем пункт —1.
Как видим, в окне Define HTML Style стала доступна группа элементов управления Paragraph Attributes, задающая форматирование всего абзаца. Раскрывающийся список Format задает формат абзаца (Paragraph, Heading I и т. д.), а три кнопки-переключателя Alignment — выравнивание. Оба эти элементы управления полностью подобны своим "коллегам" из редактора свойств. Ничего здесь трогать пока не будем.
Закончив, нажмем кнопку ОК, и в списке стилей появится новое имя, помеченное знаком абзаца. Теперь выберем последний абзац нашего текста и щелкнем новоиспеченный стиль. Формат сведений об авторских правах тотчас изменится: размер шрифта станет меньше.
Если вам нужно изменить уже созданный стиль, щелкните по нему правой кнопкой мыши и в появившемся контекстном меню выберите пункт Edit. Если флажок Auto Apply отключен, вы также можете выбрать необходимый стиль и выбрать пункт Edit в дополнительном меню панели или просто дважды щелкнуть по нужному стилю. После этого на экране появится уже знакомое вам диалоговое окно Define HTML Style, в котором вы сможете изменить все, что хотите.
Идя удаления ненужного стиля также щелкните по нему правой кнопкой мыши и выберите в контекстном меню пункт Delete. Dreamweaver предупредит вас в особом окне, что стили удаляются безвозвратно; нажмите кнопку ОК, если вы преисполнены решимости избавиться от этого стиля, и кнопку Cancel, если передумали его удалять. Если флажок Auto Apply отключен, вы также можете выбрать нужный (точнее, ненужный) стиль и выбрать пункт Delete в дополнительном меню панели или щелкнуть кнопку Delete Style (рис. 3.38).
Рис. 3.38. Кнопка Delete Style панели HTML Styles
Пункт Duplicate контекстного меню списка стилей и дополнительного меню панели позволит вам создать новый стиль третьим возможным способом: скопировав и слегка изменив существующий стиль. Если вы укажете какой-либо стиль в списке и выберите пункт Duplicate, на экране появится диалоговое окно Define HTML Style, в котором будут подставлены параметры выбранного стиля. Задайте имя для нового стиля, измените нужные параметры и не забудьте нажать кнопку ОК.
|
Компания
"Студент-Плюс"
оказывает услуги по написанию рефератов на заказ, курсовых работ на заказ, дипломных работ на заказ. Все работы выполняют учителя, преподаватели и аспиранты вузов России и С.Н.Г. |
