Главная Инструменты TopStyle


CSS верстка на TopStyle Pro. Часть 2

 Печать E-mail
Автор Administrator   
11.09.2009 г.

Рейтинг 2.1/5 (7 голосов)

Создание нового каскадного стиля
 Сейчас мы займемся самым главным творческим процессом. Мы создадим CSS-дизайн для нашей веб-страницы.

Что для этого надо? Всё просто. Для начала создадим сам, отдельный файл стиля оформления, в котором и будем работать. Разумеется, совершенно не прикасаясь к самой разметке Html – кода. Ни какого вмешательства, только CSS-дизайн.

Сейчас мы займемся самым главным творческим процессом. Мы создадим CSS-дизайн для нашей веб-страницы.

Что для этого надо? Всё просто. Для начала создадим сам, отдельный файл стиля оформления, в котором и будем работать. Разумеется, совершенно не прикасаясь к самой разметке Html – кода. Ни какого вмешательства, только CSS-дизайн.

Создание нового каскадного стиля


Жмем --->> создать новый стиль. Назовем наш файл  - Style.css

Теперь, справа, в панели файлов сайта, мы наблюдаем новый, только что созданный нами файл стиля. Сейчас мы имеем саму html – страницу с размеченными областями, блоками – “Div”. Для того чтобы наш новый дизайн из файла стилей отразился на всем шаблоне веб-страницы, нам необходимо подключить этот файл к самой html – странице.
 
Подключение файла

Просто перетягиваем файл style.css в указанное на скриншоте место, между рабочими тегами <head> <head/> Всё готово для CSS – верстки! Начнем творить чудеса.
 
Начинаем верстать


1. Для начала обнулим все значения полей и отступов для основных элементов html и body.

2. Обратите внимание на то, как объедены одинаковые правила для селекторов header и  footer.

С самого начала старайтесь приучать себя к таким правилам хорошего тона и аккуратности CSS кода, что, на мой взгляд, не помешает вам ни когда. Продолжим работу с CSS. Заключаем меню навигации (блок с идентификатором menu) и область основного текстового контента в хитрые контейнеры «menunav»  и «textblock», которые служат в нашем случае «подложками» для этих блоков.

#menunav
{
width: 25%;
margin-bottom: 20px;
float: left;
margin: 2px 0px;
}

И второй блок…

#textblock {
width: 75%;
float: right;
clear: right;
margin: 2px 0px;
background: #fffafa;
border-top: 2px solid #a0d040;;
border-bottom: 2px solid #a0d040;
}

Это позволяет нам точно определить какую часть окна браузера займет навигация, а какую область основной блок контента. Как вы видите, мы задали параметры 25% и 75% соответсвенно.

- Блоки menu и text располагаются внутри своих «подложек» и занимают всю доступную им ширину.

Сами «подложки» - блоки “menunav” и “textblock”, мы позиционируем с помощью свойства float.

Какие ещё нюансы мы наблюдаем? Посмотрите внимательно:

html, body {
      margin: 0px;
      padding: 0px;
      border: 0px;
    }
    body {
      color: #000;
      background: #fff;
      font-family: Georgia, "Times New Roman", Times, serif;
    }
    #header, #menu, #text h2, #footer {
      font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
    }
    #header, #footer p {
      color: #fff;
      background: #4682b4;
      padding: 10px 20px;
      margin: 0px;
    }
    #header {
      font-size: 250%;
    }
    #menunav
    {
      width: 25%;
      margin-bottom: 20px;
      float: left;
      margin: 2px 0px;    
         }
    #menu {
      font-size: 120%;
      background: #ffe0a6;
      text-align: center;
      padding: 20px;
      border-style: none dotted dotted none;
      border-width: 0px 2px 2px 0px;

      border-color: #c00;
border-bottom: 2px solid #a0d040;
border-top: 2px solid #a0d040;
text-decoration: none;
                }

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

 

Вид сайта
Как вы уже поняли наши блоки «подложки» - позиционируются так: Блок #menunav – прижимается к левому краю страницы. Этот элемент обтекается элементом #textblock справа, а последний прижат к правому краю страницы и сам по себе обтекается уже блоком menunav слева. Вот как интересно и просто.

Обратимся к подвалу. Вот его код:

#footer {
      width: 100%;
      clear: both;
      font-size: 70%;
    }

Самому подвалу, хвостовику, и т.д. – назначен идентификатор  #footer. И мы здесь используем свойство clear затем, чтобы запретить обтекание элементам с обеих сторон данного блока. Очищает основной поток. Таким образом, он будет располагаться ниже всех блоков menunav и textblock.
 
Для блока menunav мы назначили свойство margin-bottom: 20px; что устанавливает вертикальный отступ равный 20 пикселам. Это значит, что подвал, в любом случае будет находиться на этом расстоянии от рамки блока навигации. Эта же величина,  будет отделять область основного контента, за счет значения свойства padding, которое мы указали для блока textblock.
 
Сейчас мы проставим значения для всех оставшихся правил. Для Абзацев, текста, шрифтов и т.д. В итоге у вас есть готовый к применению «резиновый» шаблон веб-страницы.

Вот Полный код файла стилей данного шаблона:

html, body {
      margin: 0px;
      padding: 0px;
      border: 0px;
    }
    body {
      color: #000;
      background: #fff;
      font-family: Georgia, "Times New Roman", Times, serif;
    }
    #header, #menu, #text h2, #footer {
      font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
    }
    #header, #footer p {
      color: #fff;
      background: #4682b4;
      padding: 10px 20px;
      margin: 0px;
    }
    #header {
      font-size: 250%;
    }
    #menunav
    {
      width: 25%;
      margin-bottom: 20px;
      float: left;
      margin: 2px 0px;
           }
    #menu {
      font-size: 120%;
      background: #ffe0a6;
      text-align: center;
      padding: 20px;
      border-style: none dotted dotted none;
      border-width: 0px 2px 2px 0px;
      border-color: #c00;
                border-bottom: 2px solid #a0d040;
                border-top: 2px solid #a0d040;
                text-decoration: none;
                            }
    #textblock {
      width: 75%;
      float: right;
      clear: right;
      margin: 2px 0px;
      background: #fffafa;
      border-top: 2px solid #a0d040;;
                border-bottom: 2px solid #a0d040;
    }
    #text {
      padding: 20px;
    }
    #text h2 {
      color: #369;
    }
    #text p {
      text-align: justify;
      text-indent: 1.5em;
      margin: 0px;
    }
    #footer {
      width: 100%;
      clear: both;
      font-size: 70%;
    }  

  Обратите внимание что «подвал» у нас позиционируется по простой схеме static, по умолчанию. Так же, дополнительно мы определили внутри этого элемента абзац, а ширину самого контейнера установили со значением – 100% ширины окна браузера.
 
Если этого не сделать у Internet Explorer вылезают всякие разные глюки, как всегда от куда ни возьмись. Верхнее поле начинает «гулять» и  наезжает на область занятую блоками навигации и контента.  Продолжая тему багов IE, нам так же пришлось создать данное правило: #textblock  {clear: right};

Что это нам дает, вы уже наверняка поняли. Данное правило запрещает размещаться обтекаемым блокам справа от области основного текста (хотя их там и так нет, но наш «любимый» IE, всегда наполнен неприятными неожиданностями)

 

 

Похожие темы

 

Добавить комментарий

Вы можете добавлять комментарии, относящиеся к данной теме. Регистрироваться при этом необязательно.


Защитный код
Обновить

Rambler's Top100