СОРОК ВТОРОЙ УРОК

...

Сайт в CSS

Все не могла решиться начать этот урок. Давать построение сайта, полностью построенного на стилях CSS или не стоит? Дело в том, что тут много тонкостей и хитростей. А все из-за того, что некоторые браузеры несовместимы друг с другом. Им наплевать, что народ страдает, ждет уроков по этой теме, им начхать на дикого автора диких уроков, который не ест, не спит, думает как бы дальше пойти, им бы главное - с конкурентами не согласиться. Гордыня, видите ли их обуяла!

Ну и ладно, мы люди не гордые, попробуем сделать что-нибудь простенькое. Может и не развалится на ходу. Хоть бы до следующего урока продержалось и ладно!

Опять же не будем изобретать велосипед, а сделаем сайт- визитку. Вверху - шапка с логотипом, чуть ниже - строчка с названием темы, еще чуть ниже - три столбца: левое - меню, среднее - контекст, а правое - место для рекламы. Должны же мы с вами зарабатывать в конце-то концов?

Так что будем ваять следующее:

Сразу начнем прописывать стили. Дадим для общего фона цвет "чирок" - teal; margin и padding приравняем к нулю (чтобы никаких полей и отступов от границ окна), размер текста установим 12 px, шрифт дадим семейства "sans-serif" вот так:

BODY { PADDING:0px; MARGIN: 0px; FONT-SIZE: 12px; FONT-FAMILY: Verdana, Arial, Sans-Serif; BACKGROUND-COLOR: teal; }

Теперь можно разместить слева логотип и название. Это мы с вами сделаем играючи! Даже объяснять ничего не буду, просто напишу:

Стили: H1 { FONT-SIZE: 30px; COLOR: gold; PADDING-LEFT: 500px; PADDING-TOP: 0px; } --------------------- html-код: <BODY> <IMG src="image/logo.gif" width=468 height=60 alt="логотип" align=left border=0></A> <h1>Добро пожаловать!</h1> </BODY>

Так, крыша у нас построена, теперь перейдем к красной полосе. Тут мы поступим очень хитро! Представим, что надпись - "ДИКАЯ ПРАВДА - сайт в CSS" - один сплошной белый заголовок на красном фоне! И расположим его справа, добавив разные отступы и поля, чтоб смотрелось красиво!

стили: H3 { PADDING-RIGHT: 15px; PADDING-LEFT: 15px; FONT-SIZE: 12px; PADDING-BOTTOM: 5px; MARGIN: 0px; COLOR: white; PADDING-TOP: 5px; BACKGROUND-COLOR: red; TEXT-ALIGN: right } ............. html-код: <H3>ДИКАЯ ПРАВДА - сайт в CSS</h3>

А теперь рассмотрим оставшуюся часть поподробнее. Я даже не поленилась и в Фотошопе обозначила необходимые размеры:

Тут необходимо пояснение. Я назвала левый блок - menu, правый блок - reclama, а средний блок - content. Левый и правый блок шириной 160 px, один прижат к левому (LEFT: 0 px), другой к правому (RIGHT:0 px) краю экрана. Значения фиксированные (POSITION: absolute). Для каждого блока задала бордюрчик, отступы и поля. Также задала золотистый цвет заднего фона (BACKGROUND-color: gold).

Блоку "content" не хотелось давать фиксированное значение, чтобы вид страницы при разрешении браузера особо не изменялся. Поэтому я задала просто расстояние от левого и правого края экрана, равным 250 px. Ну, а остальное - те же поля и отступы и бордюрчик. Вот, пожалуй, и вся премудрость.

А записывается эта премудрость следующим образом:

Стили: #menu { WIDTH:160px; PADDING: 10px; LEFT: 0px; MARGIN: 0px; POSITION: absolute; border: 5px inset red; BACKGROUND-COLOR: gold } #reclama { WIDTH:160px; PADDING: 15px; RIGHT: 0px; MARGIN: 0px; POSITION: absolute; border: 5px outset red; BACKGROUND-COLOR: gold } #content { BORDER-RIGHT: silver 5px solid; PADDING: 10px; MARGIN: 15px 250px; MARGIN: 0px; BORDER-LEFT: #silver 2px solid; BACKGROUND-COLOR: #fff } html-код: <H3>ДИКАЯ ПРАВДА - сайт в CSS</h3>

В теле же документа прописываем следующее:

<DIV id=menu> <H2>МЕНЮ:</H2> тут содержание меню </DIV> <DIV id=reclama> <H2>РЕКЛАМА</H2> тут вешаем рекламу </DIV> <DIV id=content> <H2>Основное содержание (Content)</H2> тут основной текст </DIV>

В принципе, это все, о чем я хотела сегодня рассказать. Захотите ли вы делать свои сайты полностью в стилях CSS, или будете использовать стили очень осторожно - решать вам. Во всяком случае, я выполнила свой долг перед CSS и теперь могу идти дальше.

Осталось привести весь код странички полностью.

<html lang="ru"> <HEAD> <TITLE>Сайт в CSS</TITLE> <meta http-equiv=Content-Type content="text/html; charset=windows-1251"> <STYLE type=text/css> BODY { PADDING: 0px; MARGIN: 0px; FONT-SIZE: 12px; FONT-FAMILY: Verdana, Arial, Sans-Serif; BACKGROUND-COLOR: teal; } H1 { FONT-SIZE: 30px; COLOR: gold; PADDING-LEFT: 500px; PADDING-TOP: 0px; } H2 { FONT-SIZE: 14px; COLOR: red; } H3 { PADDING-RIGHT: 15px; PADDING-LEFT: 15px; FONT-SIZE: 12px; PADDING-BOTTOM: 5px; MARGIN: 0px; COLOR: white; PADDING-TOP: 5px; BACKGROUND-COLOR: red; TEXT-ALIGN: right; } #menu { WIDTH: 160px; PADDING: 10px; LEFT: 0px; MARGIN: 0px; POSITION: absolute; border: 5px inset red; BACKGROUND-COLOR: gold; } #content { BORDER-RIGHT: silver 5px solid; PADDING: 10px; MARGIN: 15px 250px; BORDER-LEFT: #silver 2px solid; BACKGROUND-COLOR: #ffffff; } #reclama { WIDTH: 160px; PADDING: 15px; RIGHT: 0px; MARGIN: 0px; POSITION: absolute; border: 5px outset red; BACKGROUND-COLOR: gold; } </STYLE> </HEAD> <BODY> <IMG src="image/logo.gif" width=468 height=60 alt="логотип" align=left border=0></A> <h1>Добро пожаловать!</h1> <H3>ДИКАЯ ПРАВДА - сайт в CSS</H3> <DIV id=menu> <H2>МЕНЮ:</H2> Здесь меню </DIV> <DIV id=reclama> <H2>РЕКЛАМА</H2> Здесь рекламный текст </DIV> <DIV id=content> <H2>Основное содержание (Content)</H2> <p> Тут основной текст </DIV> </BODY> </HTML>

Посмотреть это творение можно тут - Сайт в CSS

Кстати, у меня две очень важные новости.

Первая новость - моими Дикими уроками заинтересовалось издательство. Так что недалек тот час, когда все желающие смогут украсить свои полки и шифоньеры серией книг Диких уроков.

А вторая... Ну, в общем, в нашем полку прибыло. Я имею ввиду команду нашего сайта. Один раздел ведет человек, абсолютно незрячий. И знаете, где мы с ним познакомились? Да вот тоже, благодаря Диким урокам.

И я очень благодарна судьбе, что свела меня с разными удивительными и чудесными людьми. Согласитесь, одно дело создавать свои сайты зрячими, и совсем другое дело - когда ничего не видишь. Так что берите пример с Андрея, знакомьтесь с ним и вообще, стыдно вам не стать профессионалами своего дела!

Думаю, на следующем уроке мы с вами займемся чем-нибудь более интересненьким и полезненьким. До встречи!

К списку всех уроков

(В. Ахметзянова, 2005 г)