Окно Windows 7 для Вашего сайта. Часть 2

Продолжаем делать окно windows 7 c помощью html и css, а также используя картинки, которые мы подготовили в первой части этого мануала.Создайте папку в любом удобном вам месте и назовите её, например, window, в ней создайте папку images и закиньте в неё картинки из первого урока:

- top_left.png

- top_right.png

- top_center.png

- border_left.png

- border_right.png

- bottom_left.png

- bottom_center.png

- bottom_right.png

Кроме того в папке window так же создайте пустые файлы с именами win_style.css и window.html.

Откройте оба файла в любом удобном вам редакторе. В window.html добавьте основу html документа:

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

В файл win_style.css впишите первые четыре стиля:

.window
{
    width: 50%;
}

.top_center
{
    background: url(./images/top_center.png) center repeat-x;
    height: 44px;
    margin-left: 238px;
    margin-right: 226px;
}

.top_left
{
    background:  url(./images/top_left.png) left no-repeat;
    height: 44px;
}

.top_right
{
    background:  url(./images/top_right.png) right no-repeat;
    height: 44px;
    width: 50%;
}

Как видите, на первом слое у нас лежит стиль window, поэтому для изменения ширины окна достаточно поменять параметр width этого стиля. Так же обратите внимание на два параметра стиля top_center margin-left и margin-right, они задают отступы слева и справа по ширине левой и правой картинки, без этих отступов средняя картинка будет растягиваться по всей ширине окна а не между крайними картинками.

Добавим среднюю часть окна, именно в ней будет располагаться контент. В файле window.html перед последним </div> добавьте ещё 3 слоя:

WWW.COMPHOBBY.RU

И соответствующие стили для них в файле win_style.css:

.content
{
    background: #FFFFFF;
    height: auto;
    width: auto;
    margin-left: 25px;
    margin-right: 25px;
}

.border_left
{
    background:  url(./images/border_left.png) top left repeat-y;
    height: 100%;
    padding-top: 1px;
}

.border_right
{
    background:  url(./images/border_right.png) top right repeat-y;
    height: 100%;
}

Цвет фона контента задаётся в параметре background стиля content Теперь осталось добавить только нижнюю часть окна, она полностью повторяет верхнюю часть за исключением других изображений. Её разметка:

И соответствующие стили:

.bottom_center
{
    background: url(./images/bottom_center.png) top center repeat-x;
    height: 20px;
    margin-left: 19px;
    margin-right: 19px;
}

.bottom_left
{
    background:  url(./images/bottom_left.png) top left no-repeat;
    height: 20px;
}

.bottom_right
{
    background:  url(./images/bottom_right.png) top right no-repeat;
    height: 20px;
}

Вот и всё, кроссбраузерное резиновое окно создано. По желанию можете добавить картинкам прозрачности и других эффектов. Такое окно можно использовать, например для создания шаблона для wordpress или для другой CMS в стиле Windows 7, думаю, будет красиво. На сегодня всё, удачи !

Сегодня в конце видео для всех фанов Real Madrid ! Сегодня на пресс конференции легенда реала Raul попрощался с клубом. Пока, что сложно представить его в футболке Шальке, но радует то, что мы увидим Рауля в Лиге Чемпионов.

[youtube]http://www.youtube.com/watch?v=j7X3rX5dfos&feature=player_embedded[/youtube]

На сайте Tvigle.ru вы найдете огромный каталог фильмов любых жанров, в том числе вы можете бесплатно смотреть мелодрамы онлайн, или выбрать тот жанр который по вкусу именно вам.