Верстаем тему под Drupal. Часть II - разметка страницы

Главные вкладки

Аватар пользователя flecus flecus 5 апреля 2008 в 1:17

Создаем папку для своей новой темы. Назовем её Porshe - ну нравится мне эта машина )

Создаем новый HTML документ и пишем в body согласно схемы:

<div id="container">
<div id="wrapper">
<div id="header">
<div id="primary-menu">
</div><!-- end primary-menu-->

<div id="logo">
</div><!-- end logo-->
<div id="header-block">
</div><!-- end header-block-->

<div id="secondary-menu">
</div><!-- end secondary-menu-->
</div> <!-- end header-->

<div id="main-content">

</div><!-- end main-content-->
</div><!-- end wrapper-->

<div id="sidebar-left">
</div><!-- end sidebar-left-->

<div id="footer">
</div><!-- end footer-->

</div><!-- end container-->


Для улучшения разметки дополнительно к первоначальному плану вставлены

 <div id="wrapper"> и <div id="main-content">

В main-content вставляем:

<div id="top-left-block">
</div><!-- end top-left-block-->

<div id="top-right-block">
</div><!-- end top-right-block-->

<div id="sidebar-right">
</div> <!-- end sidebar-right-->

<div id="content">
</div><!-- end content-->


Создаем в папке с темой документ style.css и описываем div'ы, определяя их размеры и положение:

/* CSS Document */

html,body{margin:0;padding:0}

#container{
        width:960px;
        margin-top: 10px;
        margin-bottom: 0;
        padding: 10px;
        text-align:left;
        background-color: #00FFFF;
}
#header{
        float:right;
        width:800px;
        background-color: #FF0000;
        padding-bottom: 10px;
}

#primary-menu{
        background-color: #003399;
        width: 600px;
}

#logo{
        float:left;
        width:500px;
        background-color: #CCCCCC;
        margin-bottom: -10px;
        margin-left: 20px;
        vertical-align: bottom;
}

#header-block{
        float:right;
        width:260px;
        background-color: #6699FF;
}

#secondary-menu{
        background-color: #3366FF;
        width: 800px;
        text-align: right;
}

#main-content{
        float:right;
        width:800px;
        background-color: #CCCCCC;
        margin: 0px;
        padding: 0px;
}
#sidebar-left{
        float:left;
        width:150px;
        margin-right: 10px;
        background-color: #FFCC00;
        vertical-align: top;
}

#sidebar-right{
        float:right;
        width:260px;
        background-color: #CCCC00;
        vertical-align: top;
}

#top-left-block,#top-right-block{
        float:left;
        width:260px;
        margin-right: 10px;
        background-color: #FFCC00;
        vertical-align: top;
}

#content{
        float:left;
        width:530px;
        margin-right: 10px;
        background-color: #FFCC00;
        vertical-align: top;
}

#footer{
        clear:both;
        width:100%;
        background: #333;
        color: #FFF
}

/* Base preferences */


Для наглядности я раскрасил стили в разные цвета. В прикрепленном архиве папка с заготовкой темы.

ВложениеРазмер
Иконка пакета porshe.zip1.31 КБ

Комментарии

Аватар пользователя Ash_Ketchum Ash_Ketchum 7 апреля 2008 в 1:03

Интересно будет посмотреть когда адаптация(вставка php-кода) под Drupal пойдет т.к. сам не разу не писал с нуля темы. Только к стандартных css правлю и все.
Ждем-с...