Техника Блочной Вёрстки

Экспресс в Тайны CSS Дизайна

Приступая к демонстрации урока, сразу Хочется уточнить для Вас
один нюанс!
…Изучайте, данное руководство не просто читая как книгу,
а одновременно повторяйте все описанные мною действия.
Прямо сейчас, откройте вместе с этим документом вашу программу TopStyle Pro 3.5.0.9,
(если  у вас ещё нет этой волшебницы, вы можете скачать её, подключитесь к Интернету и щелкайте по этой ссылке).

Мы рассмотрим практические примеры верстки веб-страниц:
- С горизонтальным, верхним меню навигации,
- Резиновую верстку
- Фиксированные способы верстки не порождающие ни каких проблем с браузерами.

Если вы в точности повторите все эти трюки CSS, вы сможете спокойно рассматривать свою кандидатуру на вакансию веб-дизайнера, верстальщика в ближайшую веб-студию. Если не хотите ждать, пока вы наберётесь опыта.
Ведь на это могут уйти годы. Не лучше ли начать действовать уже сейчас?!

важноПрактика 1

1. Запустите программу TopStyle Pro. Создайте папку для вашего нового тренировочного шаблона сайта. - Начнем с классической «резиновой» верстки.
Мы обойдемся простейшей, статической схемой позиционировании элементов, даже не прибегая к использованию такого свойства как position.
Так же, мы не будем работать с такими свойствами как width и height – потому,
что ширина блочных элементов будет определяться шириной своего родителя. (родительского элемента, а высота напрямую зависит от объёма контента – авто…) Полный, наглядный пример резиновой верстки без проблем.
И так, мы создаём полноценную основу веб-страницы с четырьмя рабочими областями.

пример урока

Регистрируем в программе новый сайт.

скриншот урока

1. Даём осмысленное название своему сайту.
2. Указываем путь к корневой папке, жмем Ок.

Создадим саму основу, Html – разметку.

скриншот урока

Самое первое правило! Вставим основные строчки
DOCTYPE. Всегда и во всех веб-документах указывайте
эти значения!!

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">

скриншот урока

Это надо помнить как «Отче Наш…»
Создадим главные блоки – области нашей веб-страницы.

скриншот урока

Вот наш подробный код:

<head>
<title>Правильный сайт</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>

<body>
<h1 id="header">Правильный сайт</h1>
<div id="menunav">
<div id="menu">
<p>Здесь</p>
<p>Вставим</p>
<p>Ссылки</p>
<p>Навигации</p>

                        </div>

</div>
<div id="textblock">
<div id="text">
<h2>услуги веб-дизайнера</h2>
<p>Всякое новое неминуемо попадает под самое пристальное внимание сторонников старого – ибо в этом новом устоявшиеся традиции видят своего низвергателя. Немало было сломано копий по поводу фриланса – удаленной работы. Но в данном случае новая традиция, а правильнее новые трудовые отношения не отменяли старых – просто родился их новый вид.
</p>
<p>Сторонники традиционной формы отношений принялись вовсю критиковать удаленную работу: каких только страшных примеров не приводится в доказательство правоты убеждений в том, что фриланс – это многократный риск. Риск получить некачественную работу, риск потерять время и деньги, риск разувериться во всем человечестве сразу.
Полноте. Приводить пример – неблагородное занятие. Равно с таким же успехом можно приводить пример риска традиционных договорных форм трудовых отношений.</p>
</div>
</div>
<div id="footer">
<p>&copy;&nbsp;Правильная веб-студия, 2009.<br /><span style="white-space: nowrap">Тел.: (4222) 875-23-60.</span></p>
</div>
</body>

</html>

Наша разметка готова!

скриншот урока

Нажмем на кнопочку «полного обзора» во весь экран
и полюбуемся нашим созданным шедевром.

скриншот урока

Вот так выглядит наш шаблон без дизайна оформления.
Сейчас мы займемся самым главным творческим процессом.
Мы создадим 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, всегда
наполнен неприятными неожиданностями)

Вот мы с вами и подошли к концу этого урока.

Вы ведь не зря изучаете данный урок?
Уверен, вас очень занимает и увлекает
технология CSS – дизайна и его постижение.

Я хочу предложить вам, и дальше изучать
магию CSS вместе со мной на видео примерах!

Хотите узнать как делать например такой блок,
с закругленными углами как в шапке сайта,
без использования изображений,
работая только с кодом CSS стилей?

коробка курса

подпишитесь на мою бесплатную мультимедийную   рассылку:
«Web-дизайн Нового Поколения - Современные Трюки на Практике»

Щелкайте здесь
http://evgeniycreative.com/subscribe.html

Что вы узнаете оформив подписку?

Современные методы и приёмы web-дизайна:

Именно, новые способы вёрстки веб-сайтов на
 CSS / XНTML в программе Dreamweaver CS3.
Вы узнаете свежие трюки эффективного оформления, вашего коммерческого проекта. Аудио и видеоуроки, помогут вам наиболее быстро сбросить все мешающие барьеры и применить эти знания в достижении ваших целей.
Мы с вами начинаем Уверенно постигать искусство веб-дизайна. Создаём надёжный плацдарм для карьеры, свободного  и финансово независимого фрилансера!

Быстрая подписка на рассылку web-дизайнеру:

щелкайте здесь
http://evgeniycreative.com/subscribe.htm

Если вы ещё чувствуете себя начинающим web-дизайнером
и испытываете неуверенность, рекомендую Вам,
получить бесплатный видеокурс для начинающих:

видеокурс

Получите бесплатную серию видеоуроков здесь:
http://evgeniycreative.com/subscribe.htm

 

Приятного обучения

Евгений Смольянинов