Форматирование фрагментов текста



Предыдущая | Следующая

Форматирование фрагментов текста
Итак, давайте выделим некоторые фрагменты набранного нами текста полужирным шрифтом и курсивом. И заодно изучим средства Dreamweaver по заданию параметров различных элементов страницы.
Начнем С ТОГО, ЧТО сделаем шрифт строки Здравствуйте, уважаемые
посетители нашего сайта! полужирным. Для этого выделим ее так, как это делается в любом текстовом редакторе. И после этого посмотрим в самый низ главного окна программы. Там должно находиться небольшой окно, показанное на рис. 3.7.

Это окно (точнее, панель — небольшое окно Dreamweaver, содержащее только элементы управления и предназначенное для задания различных параметров) называется редактором свойств. С его помощью и выполняется работа над содержимым Web-страницы.
Если в низу главного окна вместо редактора свойств видна только серая полоса с надписью Properties, нужно щелкнуть мышью точно по этой надписи — и редактор свойств появится на экране. Если же там видна только тонкая серая линия с плоской кнопкой, нужно щелкнуть по этой кнопке.
Содержимое редактора свойств зависит от того, что мы выделим в окне документа. Если, как в данном случае, мы выделим текст, то в нем появятся элементы управления для форматирования текста.
Чтобы сделать шрифт выделенного фрагмента текста полужирным, нужно нажать находящуюся в редакторе свойств кнопку В , после чего она останется нажатой. Если теперь нужно сделать полужирный шрифт, наоборот, обычным, достаточно "отжать" эту кнопку. Такие кнопки (как говорят специалисты, имеющие два состояния) называются кнопками-выключателями. Еще можно воспользоваться комбинацией клавиш <Ctrl>+<B> — она работает так же, как описанная ранее кнопка.
Если мы теперь переключимся в режим отображения HTML-кода, то увидим, ЧТО Dreamweaver поместил строку Здравствуйте, уважаемые посетители нашего сайта! внутрь тега <strong>. В принципе, мы этого от него и ждали.
Теперь давайте выделим целиком весь последний абзац, описывающий наши авторские права, и сделаем его шрифт курсивным. И заодно разучим весьма интересный способ выделить фрагмент текста, имеющийся только в Dreamweaver.
Давайте посмотрим на нижний край окна документа (не главного окна!). Там находится узкая серая полоса, содержащая различные сведения о Web-странице, — строка статуса. Мы можем встретить ее в окнах очень многих программ. И везде она ведет £ебя по-разному.
Так вот, в большей части строки статуса окна документа Dreamweaver расположена секция тегов (рис. 3.8). Она содержит набор небольших кнопок, соответствующих тегам, в которые вложен фрагмент текста, где в данный момент находится текстовый курсор. Самая правая кнопка (<strong> — на рис. 3.8) соответствует тегу, содержимым которого является этот фрагмент, кнопка, расположенная левее (<р>), соответствует тегу-родителю и т. д. Самая левая кнопка — <body> — соответствует секции тела Web-страницы, то есть всему содержимому окна документа.

Предположим, что нам нужно выделить текст, помеченный тегом <strong>
(строку Здравствуйте, уважаемые посетители нашего сайта!, шрифт КОТО-
рой мы только что сделали полужирным). Для этого поместим текстовый курсор куда-либо на эту строку (после чего секция тегов примет вид, показанный на рис. 3.8) и нажмем кнопку <strong> этой секции, после чего вся строка будет выделена. (Хотя с тем же успехом мы могли бы щелкнуть кнопку <р>.) А кнопка <body> выделяет всю Web-страницу (то есть все содержимое тега <body>).
Давайте поставим текстовый курсор на последний абзац и щелкнем в секции тегов строки статуса кнопку <р>. После этого весь последний абзац будет выделен.
Чтобы превратить шрифт, которым набран выделенный фрагмент текста, в курсивный, нужно нажать кнопку-выключатель Щ, находящуюся в редакторе свойств. Также можно воспользоваться комбинацией клавиш <Ctrl>+<I>.
Кстати, секция тегов поможет нам в том случае, если нужно удалить какой-либо элемент страницы. Достаточно щелкнуть по кнопке, соответствующей нужному тегу, и нажать клавишу <Del>.
Аппетит приходит во время еды. Давайте еще что-нибудь сотворим с нашим текстом. Например, изменим шрифт, которым набрана строка здравствуйте,
уважаемые посетители нашего сайта !, немного увеличим его размер И СДе-
лаем эту строку красной. Разумеется, сначала мы должны ее выделить, для чего воспользуемся секцией тегов.
Для смены шрифта используется раскрывающийся список Font, показанный на рис. 3.9, а для смены размера шрифта — список Size, показанный на рис. 3.10. Оба этих списка находятся все в том же редакторе свойств. Давайте посмотрим, какой выбор они нам предлагают.

 

Раскрывающийся список Font содержит несколько пунктов, представляющих так называемые стандартные шрифты HTML, которые могут быть использованы на Web-страницах. Предполагается, что эти шрифты установлены на любом клиентском компьютере, поэтому никаких проблем с отображением текста на Web-страницах быть априори не должно. Стандартных шрифтов немного, но в Web-дизайне больше и не нужно.
Замечание
В принципе, стандарты HTML и CSS не запрещают нам задать для текста любой шрифт. Но при этом нам самим придется позаботиться, чтобы у посетителей нашего сайта этот шрифт имелся.
Пункт Default Font этого списка задает для выделенного текста тот же шрифт, что и у родительского тега.
Также стандарты HTML и CSS определяют несколько стандартных величин размеров для шрифта. Им соответствуют пункты xx-small, x-small, small, medium, large, x-Iarge и xx-large раскрывающегося списка Size. Они перечисляют все стандартные размеры в порядке от самого мелкого до самого крупного. Пункты larger и smaller задают размер шрифта соответственно на одну ступень больше и меньше размера шрифта родительского тега. Числовые пункты задают размер шрифта в пунктах; также можно ввести нужный нам размер вручную прямо в список. А пункт None делает размер шрифта таким же, как у родительского тега.
Давайте зададим для выделенной нами строки текста шрифт Verdana, Arial, Helvetica, sans-serif, для чего выберем соответствующий пункт списка Font. И увеличим на одну ступень размер этого шрифта, выбрав в списке Size пункт larger. А после этого давайте...
Стоп! Что это такое? В раскрывающемся списке Style, находящемся все в том же незаменимом редакторе свойств, появился пункт stylel. И шрифт, которым набран этот пункт, в точности совпадает со шрифтом выделенной нами строки. Список Style, если следовать логике, предназначен для выбора стилевого класса (стили переопределения тегов, как мы знаем, привязываются автоматически), который будет привязан к выдел г 'ному тексту. Выходит, Dreamweaver автоматически создал стилевой класс и привязал его к этой строке? Давайте посмотрим!
Переключимся в режим отображения кода HTML и посмотрим на секцию заголовка Web-страницы. Так и есть — там находится свежесозданная таблица стилей с единственным стилем stylel (цифра в конце имени может быть другой и даже может измениться впоследствии — это нормально). Его определение выглядит так:
.stylel { font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; font-size: larger; }
То есть он задает шрифт (атрибут font-family), размер (уже знакомый нам атрибут font-size) и полужирность шрифта! Dreamweaver убрал тег <strong> и внес в определение стиля атрибут font-weight, задающий эту самую полужирность (значение bold). Пожалуй, эта программа даже лучше, чем мы ожидали!
Осталось заставить выделенную нами строку "покраснеть". Для этого мы переключимся обратно в режим отображения Web-страницы и обратимся к особому инструменту Dreamweaver, предназначенному для выбора цвета, — селектору цвета. Он выглядит так — \Щ\
Мы уже знаем, как задать цвет в CSS — ввести его английское название: green (зеленый), red (красный) и т. д. Но таким образом можно задать далеко не все цвета, а только немногие. Большинство цветов задаются так называемым кодом RGB (Red, Green, Blue — красный, зеленый, синий) вот в таком формате: #rrggbb. Здесь rr — это шестнадцатеричное число от 0 до FF, задающее долю в окончательном цвете красной составляющей, gg — зеленой, а вв — синей. Пример задания цвета в формате RGB — #336699 (это тускло-голубой цвет).
Этот самый код RGB мы можем ввести в небольшое поле ввода, находящееся в правой части селектора цвета, и нажать клавишу <Enter>. Но ведь мы не знаем код нужного нам цвета! Поэтому лучше щелкнем по небольшой квадратной кнопке, находящейся в левой части селектора цвета. На экране появится небольшое окно выбора цвета, показанное на рис. 3.11.

Большую часть этого окна занимает палитра — набор разноцветных квадратиков. Чтобы выбрать нужный цвет, достаточно щелкнуть по соответствующему квадратику. После этого окно выбора цвета закроется, а выбранный цвет будет тотчас применен. Если же нужно закрыть данное окно без выбора цвета, достаточно нажать клавишу <Esc>.
Давайте выберем в окне красный цвет. И сразу же переключимся в режим отображения HTML-кода, чтобы взглянуть на таблицу стилей. Dreamweaver
добавил в единственный стиль styiei атрибут задания цвета color со значением, соответствующим коду RGB выбранного нами цвета.
Здесь нужно сказать еще несколько слов о цветах, применяемых в Web-дизайне. Дело в том, что разные компьютерные платформы — даже разные компьютеры — имеют разные параметры видеосистемы. Одни могут отображать всего шестнадцать цветов, а другие — все 16,7 миллионов, что с лихвой перекрывает цветовую разрешающую способность человеческого глаза. Разумеется, при таком богатом множестве компьютерных платформ Web-дизайнеру не стоит и рассчитывать, что все его цвета и оттенки будут везде отображены правильно.
Поэтому стандарт HTML определяет так называемую безопасную палитру цветов, которая гарантированно должна отображаться правильно всеми программами на всех компьютерах. Web-дизайнерам рекомендуется придерживаться этой безопасной палитры (хотя никто им не запрещает ее игнорировать). И палитра цветов, выводимая в окне выбора цвета Dreamweaver, также соответствует этой палитре.
Теперь сохраним нашу единственную Web-страницу. И приступим к работе над целыми абзацами текста.

 

Содержание Книга по php и mysql