Продолжим форматировать текст web страницы, да и саму страницу. В прошлой статье (Форматирование текста в редакторе Dreamweaver) мы остановились на том, что редактор, выполняя создание html страницы, создал стиль, который определяет тип и размер шрифта всего текста, без заглавия. Если вам необходимо будет сделать форматирование какой-либо части этого текста, то проблем с этим не будет. Например, вам нужно выделить часть текста красным цветом, или любым другим. Обратите внимание на два малозаметных окошка в панели Свойства под окошком Формат CSS. Если выделить часть текста, щелкнуть мышкой на левом окошке, и в раскрывающемся списке выбрать нужный цвет, то получим и нужный результат:
А в панели Стили CSS появится новый стиль. Не проблема, если вы передумали и решили изменить цвет. Достаточно снова выделить часть текста и выбрать другой цвет с помощью тог же инструмента. А редактор создаст новый стиль.
Теперь обратите внимание на кнопку Свойства страницы во все той же панели Свойства. Ее назначение, я так понимаю, облегчить процесс создания html страницы и ее форматирования . Именно всей страницы, а не отдельного абзаца или части текста!
Продолжая создание html страницы проведем эксперимент. Зайдем в эту панель и в категории Внешний вид, зададим тип шрифта, отличный от шрифта Arial, который мы уже задали, форматируя текст через инструменты панели Свойства. Жмем ОК. Что-то изменилось? Ничего! А так и должно быть! Посмотрите на панель Стили CSS. Редактор создал новый стиль body, для всей страницы. А тегом body в языке html обозначается все то, что вы видите на экране браузера, то есть вся создаваемая html страница. Почему не изменился шрифт?
Потому, что стили, созданные для отдельных элементов страницы имеют приоритет над стилями, созданными для всей страницы, а те в свою очередь над стилями, созданными для всего сайта. Я имею в виду те, что в файле таблицы стилей.
Кто забыл о чем речь – зайдите на страницу Создаем страницу сайта в Dreamweaver.Стили css. Естественно об этом нужно помнить.
Вернемся к панели Свойства страницы. С ее помощью и с помощью панели Свойства можно создать html страницу, вполне приличную, и несложную. Хотите попробуем? Я возьму текст из предыдущей статьи и попробую выжать максимум возможного из панели Свойства страницы.
Итак, текст и заглавие есть. Начнем создание html страницы с общих свойств страницы. Щелкнем на кнопке Свойства страницы. В категории Внешний вид:
шрифт – Arial
размер – 14
цвет текста — #333333
цвет фона — #FFFFCC
Жмем ОК.
Заглавие – Заголовок 1, выравнивание - по центру, цвет— #000099
Начало первой строки сделаем полужирным, курсив и цвет — #FF0000
Вставим в начало текста графику, с выравниванием по левому краю и горизонтальным отступом 10 пикселей.
Продолжаем создание html страницы и создадим маркированный список из части текста
Из слова Кнопка в маркированном списке сделаем ссылки. Зайдем снова в свойства страницы, категория Ссылки, и отформатируем их:
шрифт – Georgia, полужирный, размер – 16, цвет ссылок — #FF0000, выделение ссылок — #0099FF, стиль подчеркивания – никогда не подчеркивать. Жмем ОК.
И вот что получилось. Не шедевр, но и времени ушло на это минут десять!
Существенный недостаток этого «шедевра» это то, что у него нет заданной ширины и он будет расползаться по всему экрану браузера. Но это поправимо, причем за пару минут. Вставим на создаваемую html страницу, перед заглавием, плавающий контейнер:
Вырезаем все содержимое страницы и вставляем в контейнер. Создаем стиль для контейнера. Определяем его или в таблицу стилей, если вы будете делать еще такие же страницы или если страница одна – только в этом документе. В стиле задаем отступы: сверху – 0, снизу – 0, слева и справа – авто и естественно ширину. Привязываем стиль к контейнеру. И все дела.
У панели Свойства страницы есть еще и возможность вставлять фоновое изображение, задавать поля со всех сторон, можно выделять цветом просмотренные и активные ссылки, можно задавать размер и цвет шрифта для заголовков разного уровня. Так, что создание html страницы в редакторе Dreamweaver — процесс со многими вариантами. Можно создать html страницу и выше описанным образом, не создавая предварительно дизайн страницы сайта. Может для кого-то это будет оптимальный вариант.