1  2  3  4  5  6  7  8

Общие свойства Web - страницы
Ну вот. Теперь у нас есть практически готовая главная Web -страница наше го сайта. Осталось только сделать несколько завершающих штрихов и работа над ней будет завершена.
Выше мы создали две гиперссылки. И выяснили, что Web -обозреватель форматирует их по-своему, отлично от основного текста. Это, собственно, правильно: гиперссылки должны сразу бросаться в глаза, иначе пользова­ тель будет вынужден едва ли не в лупу просматривать весь ваш текст в поисках гиперссылок, ведущих на другие страницы. И в конце концов уйдет с вашего сайта, что вам совсем не нужно.
Может быть и так. Вы тщательно разработали дизайн Web -страницы, по­ добрали цветовую гамму, а гиперссылки с их фиксированными цветами выбиваются из общего ряда и просто режут глаз. Ведь Web -обозреватель не обращает ни малейшего внимания на цветовые настройки родительского элемента (в данном случае, текста, когда расцвечивает их. Что делать в этом случае?
Такая проблема решается очень просто. Нужно всего лишь изменить общие свойства вашей Web -страницы, т. е. настройки, затрагивающую саму страницу, а не ее элементы. Давайте выясним, как это сделать.
Общие свойства страницы задаются в диалоговом окне Page Properties . Вызвать его можно, выбрав пункт Page Properties в меню Modify или контекст ном меню или нажав комбинацию клавиш < Ctrl >+< J >.
В поле ввода Title вводится название Web -страницы. Вы можете пользоваться полем ввода, расположенным на инструментарии документа , либо вводить его в названном окне.
Селектор цвета Background позволяет вам выбрать цвет фона страницы. По умолчанию он белый, но вы можете выбрать какой угодно, лишь бы после этого текст на вашей странице нормально читался. Например, давайте для нашей страницы выберем светло-желтый цвет под кодом #ffffcc .
Аналогично селектор цвета Text позволяет выбрать цвет текста (по умолчанию он черный). Опять же здесь действует правило: текст должен читаться нормально, без излишнего напряжения глаз. Для нашей страницы выберем темно-синий цвет #000066 .
Теперь обратим внимание на три селектора Links , Visited Links и Active Links Они позволяют выбрать цвет гиперссылок, соответственно, непосе щенных (по умолчанию синий), посещенных (темно-красный) и активной гиперссылки (ярко-красный), по которой в данный момент щелкает поль­ зователь. И еще раз повторим то же самое правило: пользователю должно быть удобно читать ваш текст. Но в случае гиперссылок добавляется еще одно правило: обычные гиперссылки должны быть хорошо заметны на фоне текста, посещенные ссылки должны выглядеть чуть менее заметно (но все равно выделяться на фоне текста), а активная гиперссылка — максимально ярко. Исходя из этого правила, выберем, соответственно, ярко-синий (#0066FF), тускло-синий (#006699) и ярко-красный (#ff0000) цвета.
Мы можем нажать кнопку ОК, чтобы сохранить сделанные установки. Но в данном случае лучше всего воспользоваться кнопкой Apply , которая при­ меняет заданные вами свойства, не закрывая окна Page Properties . Отодвинем окно в сторону и посмотрим на нашу страничку. А что, получилось неплохо!
Поля ввода Left Margin и Top Margin задают расстояния между рамкой окна Web -обозревателя и содержимым Web -страницы, соответственно, слева и сверху. По умолчанию эти значения равны 10 и 15 пикселов. Вы можете задать эти значения равными 0, если хотите вообще убрать свободное пространство между рамкой окна и содержимым страницы, но мы не советуем вам это делать — страница будет выглядеть очень плохо.
Внимание!
Значения , введенные в поля ввода Left Margin и Top Margin , не воспринимаются Navigator .
Поля ввода Margin Width и Margin Height задают расстояние между рамкой окна Web -обозревателя и содержимым Web -страницы, соответственно, по горизонтали и по вертикали. Они поддерживаются и Internet Explorer , и Navigator Поэтому лучше всего задавать именно их из соображений совместимости.
Раскрывающийся список Document Encoding задает кодировку текста вашей Web -страницы. (О кодировках и их выборе см. главу 2.) По умолчанию там выбрана кодировка, которую вы задали в настройках Dreamweaver , и менять ее без уважительных причин не стоит.
Закройте диалоговое окно задания свойств Web -страницы, нажав кнопку ОК или Cancel . С окном Page Properties мы закончили.
Примечание
Все вышеописанные настройки задаются атрибутами тега < body >, перечисленными
в табл . 3.5.
Примечание
Обратите внимание , что значения атрибутов bottommargin и rightmargin в среде Dreamweaver вы установить не можете . Для этого вам придется редактировать сам HTML - код .
Внимание!
Кодировка документа задается с помощью одинарного тега < мета >, размещающегося в HTML - заголовке страницы . Подробнее о теге < мета > мы поговорим в главе 14.
Дополнительные возможности Dreamweaver
Здесь мы рассмотрим некоторые дополнительные, но отнюдь не второстепенные возможности Dreamweaver , которые обязательно вам пригодятся.
Использование цветовых схем
Только что мы рассмотрели, как с помощью диалогового окна Page Proper ­ ties можно быстро поменять всю расцветку Web -страницы. Но Dreamweaver предлагает большее. Вместо того чтобы скрупулезно, методом проб и ошибок, подбирать цвета для страницы, вы можете воспользоваться одной из определенных в программе цветовых схем — комбинацией цветовых настроек для текста, фона и гиперссылок, подобранной профессиональными дизайнерами.
Цветовые схемы выбираются в диалоговом окне Set Color Scheme Command Чтобы вызвать его, выберите пункт Set Color Scheme в меню Command
Процесс выбора цветовой схемы состоит из двух шагов. Сначала вы должны выбрать одну из категорий цветовых схем, называемых по цвету фона стра­ ницы: Black , Blue , Brown , ..., Yellow . Категория выбирается в списке Background , после чего в списке Text and Links появляются имена собственно категорий, из которых вы можете выбрать любую.
Оценить выбранную цветовую схему вы можете на панели предварительного просмотра, расположенной в центре окна Set Color Scheme Command . Но т. к. разработчики Dreamweaver уверяют, что все цветовые схемы разработаны профессиональными дизайнерами, они будут, по крайней мере, достойно выглядеть. Однако окончательный выбор схемы, наиболее подходящей вашему сайту, зависит только от вас.
Нажав кнопку Apply , вы можете применить выбранную вами цветовую схе­ му без закрытия диалогового окна. Чтобы закрыть это окно, нажмите кнопку ОК для сохранения выбранных установок или Cancel — для отказа от них.
Попробуйте поэкспериментировать с предлагаемыми Dreamweaver цветовыми схемами. Может быть, какаято из них вам понравится.
Вставка и чтение комментариев.
Вот и все. На этом этапе мы закончили. Наша Web -страничка уже пол ностью функциональна; осталось только написать остальные четыре стра ницы и связать их с главной.
Но память человеческая недолговечна... Вы можете замотаться с работой и забыть, что хотели доделать сайт. Неплохо было бы записать все, что вы хотели сделать, на бумажку. Но, имея перед собой компьютер, както несо лидно оклеивать стены и набивать карманы бумажками-"незабудками". В конце концов, мы в компьютерную эпоху живем или нет?!
К счастью, стандарт HTML определяет так называемые комментарии — фрагменты текста, хранимые в коде Web -страницы, но не обрабатываемые и не отображаемые Web -обозревателем. Вы можете написать в комментарии все, что угодно, но обычно разработчики страниц пишут короткие примеча­ ния или напоминания для самих себя.
Прежде всего, решите, где вы вставите комментарий. Логично поместить его как можно ближе к тому фрагменту страницы, который вы хотите изменить в дальнейшем и к которому, собственно, и будет относиться комментарий. В нашем случае поместите текстовый курсор в конце третьего абзаца ("На этом сайте вы можете прочитать:"). Вставить комментарий проще всего из панели объектов. Для этого пере­ ключитесь на страницу Common и нажмите кнопку Comment . На экране появится диалоговое окно Comment . Это окно устроено очень просто. Вы вводите текст комментария в область редактирования Comment и нажимаете кнопку ОК для вставки комментария или Cancel — для отмены. После этого в конце третьего абзаца появится значок комментария, отображаемый в таких случаях Dreamweaver .
Повторим, что в программе Web -обозревателя комментарий не будет виден совсем. Для вставки комментария вы также можете выбрать пункт Comment подменю Text Objects меню Insert .
Теперь щелкните мышью на значке вставленного нами комментария. Зна­ чок будет выделен, а окно редактора свойств изменится. В области редактирования, занимающей большую его часть, вы сможете просмот­реть и изменить текст комментария. Чтобы впоследствии удалить ненужный комментарий, просто выделите мышью его значок и нажмите клавишу < Del >.
Примечание
Комментарии вставляются в HTML - код с помощью пары тегов <! --…--> или
< COMMENT >...</ COMMENT >.

1  2  3  4  5  6  7  8

Вверх