КАК НА СИЦИЛИЙСКОМ КЛАДБИЩЕ, или красоты эпических масштабов на домашней страничке. Лиха беда начало. Из серии: «Плеснуть чайку?»
Вчера мы с вами слепили веб-страницу, выглядела она так себе, но работала, зараза, поскольку ошибок мы при ее написании не допустили.
СЕГОДНЯ НАЧНЕМ ЕЕ ДИЗАИТЬ
Внешний вид веб-страницы зависит от фона, текста и рисунков. Какова ваша задача?
НЕ ИМЕЕТ ЗНАЧЕНИЯ, ЧТО И КАК ВЫ БУДЕТЕ НА НЕЙ РАЗМЕЩАТЬ, ГЛАВНОЕ, ЧТОБЫ ВНЕШНИЙ ВИД СООТВЕТСТВОВАЛ СОДЕРЖАНИЮ.
Всего-то.
Если там будут литературные произведения с большим количеством текста, извольте побеспокоиться, чтобы он был легко читаем. Темное на светлом фоне читается лучше, чем светлое – на темном, теплый цвет на холодном фоне – лучше, чем холодный на теплом. Если нет фантазии, или не желаете фантазировать, выбирайте «белый верх - черный низ», то есть белый фон и черный текст. Если хотите пофантазировать – флаг вам в руки.
ЧТО МНЕ НЕ НРАВИТСЯ, НО ЭТО – МОЕ ЛИЧНОЕ МНЕНИЕ:
Красный текст на черном фоне, черный – на красном, как и светло-голубой и желтый на белом – глаза сломаешь.
Сайт в оттенках серого. Вгоняет в депресс.
Поэкспериментируйте, и определите, что вам по душе, прежде чем приступать к дизайну своей странички. Помочь определить 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. Ими займемся в следующий раз.
Как на сицилийском кладбище, или красоты эпических масштабов на
© Copyright: О.Хорхой, 2004
Свидетельство о публикации №204011100017
Свидетельство о публикации №204011100017
Рецензии
Ольга! Эврика!
Это я в том смысле, что нашел мучивший меня последние два дня ответ на вопрос: кто такой чайник? Так вот: через час созерцания многотысячной армии значков в блокноте - а я боюсь сравнить их с китайской грамотой, ибо мне она понятнее - голова моя закипела, как чайник.
Правда, возник другой вопрос - а чему там кипеть-то? Вакуум, вроде, не способен на это:-)).
Ладно, это всё преамбула. Я здесь натолкнулся на автора, у которого примерно схожие замыслы. Вот ссылка на его текст, возможно найдёте их полезными для себя. Или Ваша торпедная напористость заинтересует Хирьянова С. У него есть "свой амбиционный план с литературным агентством".
http://www.proza.ru:8004/2003/08/08-125
По поводу статей о сайтостроительстве: У Вас доброе сердце... завтра могут пойти вопросы с просьбой помочь в том или ином вопросе и Вы увязнете в ответах. А Вы - пишущий автор.
А если вопросы не пойдут - на сердце будет трещинка обиды от невнимания. Достаточно было указать на титульной странице, что Вы согласны помочь в построении сайта любому, кто обратится.
С уважением,
Кузьмин С.В. 11.01.2004 20:25 • Заявить о нарушении
Это я в том смысле, что нашел мучивший меня последние два дня ответ на вопрос: кто такой чайник? Так вот: через час созерцания многотысячной армии значков в блокноте - а я боюсь сравнить их с китайской грамотой, ибо мне она понятнее - голова моя закипела, как чайник.
Правда, возник другой вопрос - а чему там кипеть-то? Вакуум, вроде, не способен на это:-)).
Ладно, это всё преамбула. Я здесь натолкнулся на автора, у которого примерно схожие замыслы. Вот ссылка на его текст, возможно найдёте их полезными для себя. Или Ваша торпедная напористость заинтересует Хирьянова С. У него есть "свой амбиционный план с литературным агентством".
http://www.proza.ru:8004/2003/08/08-125
По поводу статей о сайтостроительстве: У Вас доброе сердце... завтра могут пойти вопросы с просьбой помочь в том или ином вопросе и Вы увязнете в ответах. А Вы - пишущий автор.
А если вопросы не пойдут - на сердце будет трещинка обиды от невнимания. Достаточно было указать на титульной странице, что Вы согласны помочь в построении сайта любому, кто обратится.
С уважением,
Кузьмин С.В. 11.01.2004 20:25 • Заявить о нарушении
А не надо кипеть. Проще - двигаться от простого к сложному.
Продолжение будет на моем сайте - в ближайшее время.
О.Хорхой 11.01.2004 23:37 Заявить о нарушении
Продолжение будет на моем сайте - в ближайшее время.
О.Хорхой 11.01.2004 23:37 Заявить о нарушении