Первые шаги создания дизайна на установленном Drupal

Я сам сейчас пытаюсь с этим разобраться, так что могу быть не прав. Советую смотреть в сторону http://drupal.org/project/zen

Большое спасибо. Посмотрел.
Вы смогли настроить тему zen под свои требования?
Отпишитесь, пожалуйста, подробней.

Пока еще нет, говорю же сам пока разбираюсь =)
Руководствуясь readme создал собственную подтему zen и немного поменял настройки css для нее. Ща буду дальше курить мануал.

Хотелось бы услышать советы тех, кто уже собаку съел на этом деле.

Ок, я сейчас скопировал в sites/all/themes/ тему zen_classic и попытаюсь её изменить под то что мне нужно.

"Хотелось бы услышать советы тех, кто уже собаку съел на этом деле."
Да, очень хотелось бы.

А я бы все-таки советовал прочитать readme... Там есть специальная тема для создания своих тем, называется STARTERKIT, вот от нее и надо плясать. В ридми описано что с ней надо зделать.

1. Читаете мануалы по css
2. Берете стандартную тему (я использую гарланд, в ней все элементы: шрифты, текстовые и блочные стили приятны для пользователя), но рекомендуют все zen (она проста и документированна)
3. Весь процесс дизайна: вставлять блоки в регионы, регионы располагать там, где нужно с помощью и page.tpl.php, далее css оформление всего этого
4. новые регионы в теме создаются следующим образом
   • в файле темы имя_темы.info пишете строку regions[имя_региона] = имя_региона
   • в файле темы page.tpl.php вставляете куда надо (вычисляется экспериментально) строку <div id="имя_региона"><?php print $имя_региона; ?></div>
   • хотя если вы используете zen, то это не нужно, там их и так достаточно
5. Далее сохраняете исходный код страницы, открываете его в редакторе (лучше Adobe Dreamweaver) и смотрите что где
6. Работаете только с файлами page.tpl.php и style.css, из необходимых знаний - только css
7. если нужны какие-то элементы типа меню и т.п. ищете нужные модули. Меню здесь: http://drupal.ru/node/11082, модули http://drupal.ru/book и http://drupal.org/project/Modules

"Настройкой" вам не обойтись. Вам придется верстать и прораммировать. Готовых рецептов для вашего сайта нкито не даст.

digital_sword, огромное спасибо.

Химический Али, ваше сообщение мне адресовано?
""Настройкой" вам не обойтись. Вам придется верстать и прораммировать. Готовых рецептов для вашего сайта нкито не даст."
Если мне то я просил помощи (общих советов, указаний) как раз таки в верстании и программировании.

Т.е. Вы предлагаете поработать за Вас?

Химический Али, разумеется нет, прочтите, пожалуйста, сообщение которым начата эта тема.

Yanzay, да, действительно. Как у вас продвигается процесс? Сделал "свою" тему, как сказано в readme zen'а, пытаюсь теперь привести её хотя бы к похожему на мои картинки виду.

digital_sword, подскажите пожалуйста, когда я захожу в админке в "блоки", выделяемые области с надписями "right sidebar", "left sidebar", "content top", "header" - это и есть регионы?
Т.е. в page.tpl.php у меня должен быть div c id="header"?
Видимо я где-то глубоко заблуждаюст, т.к. в page.tpl.php у div-ов идут очень странные названия...

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

Та я все никак не могу разобраться как правильно верстать на css =) С таблицами все понятно - картинку порезал, в таблицу кусочки повставлял и все, а с css как-то непонятно все... Может кто линком в меня кинет где это все расписано по-человечески? Тока не предлагайте гуглить, пробовал уже - нахожу только туториалы как разметить страницу на блоки (top, right, mid, left и т.д.).

для главной можно создать
отдельный файл
page-front.tpl.php

такж вроде у главной к body добавляеться класс front или frontpage
чтото типа того
так что им можно пльзоваться описывая в сss элементы главной страницы

блоки и регионы это где
<?print $left_sidebar ?> а что вокруг него движку фиолетово
но если вы его поместите в

Yanzay, вот-вот и я так же. В табличном виде в html сделать шаблон сайта можно за полчаса, но вот разобраться с css и сделать в виде универсальной, настраиваемой темы друпала...
Уже день и только начал понимать как тут что.

Одного css не достаточно, чтобы сделать картинку во всю ширину страницы, у меня на фоне меню (Компания, услуги, цены) такая идёт?
Я к чему, т.е. нормально - при создании темы на drupal - делать "железные" изменения в page.tpl.php - например вставлять там картинки, писать какой-то конкретный текст?

Ничего более не трогая, указываю имя шрифта в layout.css, вот таким образом:
#site-name
{
font-family: Verdana;
}
Имя сайта выводится другим шрифтом, не зависимо от того что я меняю...
Интересно вообще, как бы кто-либо имеющий опыт работы с друпалом решал поставленную предо мной задачу... Скажите кто-нибудь, вы бы создавали свою тему? На основе zen'а? Кардинально меняли бы page.tpl.php? или достаточно небольших изменений + полное редактирование css?

Да, регионы и есть. Названия регионов и дивов не должны совпадать. Это я для простоты их одинаковыми написал в примере.

Вставлять в page.tpl.php картинки, конкретный текст - нормально. Важно, чтобы это редко изменялось только (а то у пользователей этот файл закешируется и изменения видны не будут)

digital_sword, спасибо большое.
Раз нормально, тогда можно сделать и "табличный" дизайн, без слоёв и без css.

Я раньше верстал таблицами, но сейчас div'ами верстаю. Думаю для CMS лучше ими.

Два первых шага:
1. Сверстать полностью дизайн - html css
2. Вставить в div'ы PHP-сниппеты какой-нибудь темы (можно garland), чтобы файлы tpl.php получились

А потом доверстывать уже получившуюся тему оформления, потихоньку наполняя сайт содержимым, добавляя функционал и т. д......

P.S.: Дизайн хороший. Рад за Вас, что Вы начинаете изучать Drupal с прикручивания такого дизайна.

AntonTau, спасибо.
Я постепенно пришёл к этому... Эх, если бы вы ответили часов на 6 раньше, возможно я бы уже дошёл до 2-го пункта...
Сейчас сверстаю на таблицах, без css. Потом попытаюсь осуществить ваш 2-ой пункт, только без div-ов...

Приятный он, не спорю, но сложный:)

Посмотрите пособие htmlbook.ru, там про css коротоко, но вполне ясно.
Возьмите какую-нибудь тему оформления Drupal и попробуйте поменять ее, меняя код в файле style.css, подставляя свои изображения.
Пользуйтесь браузером Mozilla FireFox и плагином к нему FireBug, который в реальном времени позволяет наблюдать, как меняются элементы страницы при изменениях CSS
Тогда, думаю, с css и div'ами будет более понятно.

AntonTau, спасибо. За ссылку отдельное спасибо.

Последний час я занимаюсь вод чем: снизу у сайта плавно должен цвет менятся. Я делаю это узенькую текстуру и устанавливаю её фоном строки таблицы, вот таким образом:

  <table width='100%'>
     <tr height='378px' background=
        <?php echo '"';
              echo $directory;
              echo '/footer.png"';
         ?>>
       <td>
       &nbsp;
       </td>
      </tr>
    </table>

Она должна быть всегда внизу страницы (какой длинно бы она не была) и за текстом.
Хорошо, заключаю эту таблицу в div, вот таким образом:

  <div style="position: absolute; width: 98%; height: 378px; z-index: -1; bottom: 1%">
    //здесь моя таблица
  </div>

Да, она за текстом, она нужной ширины, но она не внизу страницы, если страница длинная, то она внизу того что влазит на экран, в моём случае это середина страницы...
Подскажите, как сделать чтобы слой был всегда внизу страницы?

Проблему слоя, который всегда должен быть снизу я решил следующим образом:
создал слой, в котором текст, вот так:
фишка в том что бы его сместить на слой снизу на нужное кол-во пикселей (top: 140px;)

  <div style="position: relative; z-index: 2; float: left; width: 100%; top: 140px;">
     <table width='100%'>
	<tr>
	  <td>
	    Бла-бла-бла...
	  </td>
        </tr>
     </table>
   </div>

Слой картинки, которая дожна частино лежать под ним:
(потому что она лежит под предыдущим слоем (он надвинут на неё) - у неё z-index на единицу меньше)

  <div style="position: relative; z-index: 1; float: left; width: 100%;">
    <table width='100%' height='100%'>
      <tr height='378px' valign='top' background="footer.png">
	<td>
	  &nbsp;
	</td>
      </tr>
    </table>
  </div>	

Но это ещё не всё! После такого верхний слой смешён на 140 пикселей, т.е. над ним 140 пикселей пустого пространства, теперь чтобы это компенсировать, засовываем оба слоя в слой с абсолютным позиционированием и помещаем его так чтобы его начало находилось над хедером (всё равно там 140 пикселей пустых, вот их и распологаем поверх хедера)

      <div style="position: absolute; z-index: 2; width: 100%; left: 0%; top: 30px;">
 
         //Здесь слой с текстом
         <div ...> ... </div>
         //Здесь слой подкладываемой картинкой
         <div ...> ... </div>
 
      </div>

Вроде при разных размерах и окна и текста всё остаётся на каких и должно быть местах.

Фууууув.... Всё сделал полностью. Всё точно соответствует картинкам, все меню, материалы, блоки настраиваются из админки, добавлются новости и отображаются как нужно, работает поиск. В IE7, Opera 9, Mozilla 3 выглядить одинаково точно.
Сразу сверстал без css, потом переделал с использованием примитивного css.

Вобщем с момента как я узнал что существует Друпал - не многим более 50-ти часов чистой работы и я таки сделал этот сайт.

А взглянуть можно?

Нет, негде показать.
Мне не жалко, но технически он только у меня на локалке, я отдал закачкику - и что он дальше с ним делает я не в курсе и не знаю будет ли он когда-либо размещён в сети.