Уроки CSS для новичков - Сайт в стилях CSS - урок 12


High Star

Сайт в стилях 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; ,br>   PADDING-LEFT:500px;
  PADDING-TOP:0px}
.........
<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
  }

.............
<H3>ДИКАЯ ПРАВДА - сайт в CSS</H3>

А теперь рассмотрим оставшуюся часть поподробнее:


Определяем размеры

Тут необходимо пояснение. Я назвала левый блок - menu, правый блок - reclama, а средний блок - content. Левый и правый блок шириной 160 px, один прижат к левому (LEFT: 0px), другой к правому (RIGHT:0px) краю экрана. Значения фиксированные (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 200px;
  MARGIN: 0px;
  BORDER-LEFT: #silver 2px solid;
  BACKGROUND-COLOR: #fff
  }


.............

<H3>ДИКАЯ ПРАВДА - сайт в CSS</h1>

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

<DIV id=menu>
  <H2>МЕНЮ:</H2>
    тут содержание меню
</DIV>

<DIV id=reclama>
  <H2glt;РЕКЛАМА</H2>
    тут вешаем рекламу
</DIV>

<DIV id=content>
  <H2>Основное содержание (Content)</H2>
    тут основной текст
</DIV>

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

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

Листинк 32. Полный код странички в CSS

<HTML>
  <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 200px;
          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>
        1 пункт <br>
        2 пункт <br>
        3 пункт <br>
    </DIV>

    <DIV id=reclama>
      <H2>РЕКЛАМА</H2>
        Здесь рекламный текст <br>
        Здесь рекламный текст <br>
        Здесь рекламный текст <br>
        Здесь рекламный текст <br>
        Здесь рекламный текст <br>

    </DIV>

    <DIV id=content>
      <H2>Основное содержание (Content)</H2>
      <p>
        Тут основной текст. Тут основной текст. Тут основной текст. Тут основной текст. Тут основной текст. Тут основной текст. Тут основной текст. Тут основной текст. Тут основной текст. Тут основной текст. Тут основной текст. Тут основной текст.
    </DIV>
  </BODY>
</HTML>

Теперь открываем все это богатство в браузере и любуемся на свое творение:


Что хотели, то и получили!

А тут можно посмотреть этот сайт "вживую" - Сайт в CSS