КАК НА СИЦИЛИЙСКОМ КЛАДБИЩЕ, или красоты эпических масштабов на домашней страничке. Лиха беда начало. Из серии: «Плеснуть чайку?»
Вчера мы с вами слепили веб-страницу, выглядела она так себе, но работала, зараза, поскольку ошибок мы при ее написании не допустили.
СЕГОДНЯ НАЧНЕМ ЕЕ ДИЗАИТЬ
Внешний вид веб-страницы зависит от фона, текста и рисунков. Какова ваша задача?
НЕ ИМЕЕТ ЗНАЧЕНИЯ, ЧТО И КАК ВЫ БУДЕТЕ НА НЕЙ РАЗМЕЩАТЬ, ГЛАВНОЕ, ЧТОБЫ ВНЕШНИЙ ВИД СООТВЕТСТВОВАЛ СОДЕРЖАНИЮ.
Всего-то.
Если там будут литературные произведения с большим количеством текста, извольте побеспокоиться, чтобы он был легко читаем. Темное на светлом фоне читается лучше, чем светлое – на темном, теплый цвет на холодном фоне – лучше, чем холодный на теплом. Если нет фантазии, или не желаете фантазировать, выбирайте «белый верх - черный низ», то есть белый фон и черный текст. Если хотите пофантазировать – флаг вам в руки.
ЧТО МНЕ НЕ НРАВИТСЯ, НО ЭТО – МОЕ ЛИЧНОЕ МНЕНИЕ:
Красный текст на черном фоне, черный – на красном, как и светло-голубой и желтый на белом – глаза сломаешь.
Сайт в оттенках серого. Вгоняет в депресс.
Поэкспериментируйте, и определите, что вам по душе, прежде чем приступать к дизайну своей странички. Помочь определить HTML – значение цвета может программка Пикси (Pixie). Поищите в сети, она бесплатная.
Маленькая хитрость – берете картину, которая вам по душе, нравится, приводит в соответствующее настроение, выбираете самый нежный-светлый ее тон и самый темный-глухой. Определяете с помощью Пикси значения цветов, опробуете на страничке. Если подходит, оставляете, если нет – ищете другое. Заодно – найдите там цвета (еще три) для ссылок. Они должны быть яркими, сочными, поскольку должны привлечь внимание. Запишите туда же, где вы рисовали схему вашего сайта, иначе забудете потом – пять шестизначных чисел не так уж просто удержать в памяти.
Записали? Открываете свою страничку в браузере, запускаете текстовой редактор, загружаете ее и туда.
В текстовом редакторе после тега <body> - нет, даже не после него, а перед закрывающей скобкой напишем
bgcolor= silver text=navi link=purple vlink=blue alink=fuchsia
Получится: <body bgcolor= silver text=navy link= blue vlink= purple alink=fuchsia >
Что это значит?
bgcolor – цвет фона, silver – светло-серый, text – цвет текста, navy – темно-синий, link – цвет непросмотренной ссылки, blue – синий, vlink – цвет просмотренной ссылки, purple – лиловый, alink – цвет активизируемой ссылки, fuchsia – ярко-розовый.
Сохранили – обновили. Нравится? М-ммм, ну, во-первых, фон темноват. Давайте сделаем посветлее. Вот, с помощью Пикси, определили, какой цвет нам лучше сделать - #F8F4F8.
Ну, так и впишем. Не забудем только поставить кавычки для непонятливых браузеров.
Итак bgcolor= “#F8F4F8”
Ну, что, теперь лучше, правда?
Может, ссылки поярче? Давайте.
Получилась такая строка:
<body bgcolor= "#F8F4F8" text="#000080" link= "#800080" vlink= "#800000" alink="#FF00FF" >
Такие цвета нас устраивают? Да, пожалуй.
Не устраивает расположение заголовка – где-то сбоку, с припеку. Ну, так давайте поместим его в центр. Перед <h1> впишем <center>, а после </h1> - </center>.
Получим:
<center><h1> Вольный стрелок </h1></center>
То же самое сделаем с картинкой.
Получим:
<center><img src="images/helga.jpg" width=500 border=0></center>
Посмотрели, что вышло? Ну ведь правда, теперь гораздо веселее стало? Нет? А чего ж вам тогда не хватает? Не правда ли, фоновый рисунок был бы здесь весьма кстати? Их еще обоями называют… Только вот откуда его взять? Ну, можно качнуть из интернета, можно купить коллекцию на диске, можно создать самому… Для последнего нужно иметь хоть какой-то графический редактор, а у нас его может и не быть. Так что поищем в сетевой коллекции. Нашли подходящий? Вот и прекрасно. Назовем его, к примеру, fonx и запишем в папку для рисунков.
Теперь ищем, где мы задавали параметры фона, текста, ссылок, и вставляем background=images/fonx.jpg
сразу после body.
background – так задаются обои, fonx.jpg – их название, и лежат они в папке images.
Ну-ка, что получилось?
Красяя-во…
Чего там еще в щах не хватает? А, картинка выглядит какой-то незаконченной, будто ее из журнала ножницами выстригли и кое-как прилепили. Надо бы окантовать…
И текст что-то исчез из виду… затерялся на фоне обоев. Как задать параметры текста?
Можно, конечно, перед каждым абзацем писать все его прибамбуки, но как же это нудно… А можно – все стили задать в начале документа – и текстов, и окантовки рисунков, и даже в таблицу другие обои засунуть… И все это называется – таблица стилей CSS. Ими займемся в следующий раз.