В этом уроке мы создадим страницу Контакты, для нашего сайта. Который мы создаем на основе cms drupal 7 и темы Zen.Ранее мы разбирали, что такое разработка логотипа и как ее делать. Для создания этой же страницы, лучше воспользоваться модулями Webform и Page Manager. Но я не делал еще уроки по этим модулям. Обещаю их сделать в ближайшем будущем и вы сможете самостоятельно привести страницу к нужному Вам виду. А по сему воспользуемся стандартным модулем Contact. Дизайн будет отличаться от psd файла, но продолжим...
Для начала удалим ссылку на не нужную пустую страницу Контакты, созданную ранее. Переходим Структура — Меню — Главное меню. И кликаем ссылку удалить в строке Контакты.
Перейдите на страницу модулей и включите модуль Contact. По умолчанию ссылка на страницу Контактов помещена в меню Навигация. Мы переместим ее в Главное меню. Переходим Структура — Меню.
Теперь ссылка Контакты доступна для зарегистрированных пользователей. Но на нашем сайте регистрация не предусмотрена для пользователей. Поэтому, что бы предоставить форму для анонимных пользователей заходим Пользователи — Права доступа.
Не забываем сохранять изменения. Теперь контактная форма доступна для анонимных пользователей.
Согласно нашего макета psd, нам необходимо создать два блока :
- Карту, наше расположение.
- Блок с информацией.
Для этого переходим на страницу google — maps. Вводим нужный адрес. И кликаем на Ссылка.
Далее переходим по ссылке Настройка и предварительный просмотр. И выбираем нужный нам размер.
Код который нам предлагается, мы скопируем и вставим в блок, который сейчас создадим. Конечно лучше и безопасней для сайта написать модуль для создания этого блока. Но это не входит в эти уроки. Просто модуль PHP filter создает дополнительные опасности. Но мы пойдем этим путем. Активируйте его на странице модулей, он входит в ядро друпал. Переходим Структура — Блоки — Добавить блок.
Заходим Структура — Блоки и ставим блок на нужное место. Обратите внимание, что блок располагается ниже Содержимое страницы.
То есть будет ниже формы связи. Но потом мы дадим форме обтекание и все будет хорошо.
Создаем блок с информацией.
И выводим его только на странице Контакты.
Заходим на страницу блоков и ставим его под предыдущий блок.
Теперь на странице Контакты все выводится друг под другом.
Вооружаемся firebug и носим код в файл normalize.css .
/*Создано на друпал*/
#block-system-powered-by {
margin-left: 540px;
margin-top: 20px;
}
/*Страница Контакты ——————————————————————*/
/*Форма связи*/
#contact-site-form {
width: 585px;
height: 626px;
float: right;
margin-right: 165px;
padding-right: 45px;
background: #ffffff;
}
/*label*/
#contact-site-form label {
margin-left: 40px;
}
/*Поля———————————————-*/
#contact-site-form #edit-name,
#contact-site-form #edit-mail,
#contact-site-form #edit-subject {
width: 300px;
height: 45px;
margin-left: 40px;
}
#contact-site-form #edit-message {
width: 575px;
height: 205px;
margin-left: 40px;
}
/*Кнопка*/
#contact-site-form #edit-submit {
margin-left: 40px;
margin-bottom: 45px;
}
/*Растяжка поля ввода текста*/
#contact-site-form .grippie {
display: none;
}
/*Чекбокс и Прислать мне копию*/
#contact-site-form label.option,
#contact-site-form input.form-checkbox{
display: none;
}
/*Карта*/
#block-block-2 {
width: 240px;
height: 313px;
padding-left: 45px;
background: #ffffff;
margin-left: 165px;
margin-bottom: 0px;
}
#block-block-2 h2 {
font-weight: lighter;
color: #242424;
}
/*Реквизиты*/
#block-block-3 {
width: 240px;
height: 313px;
padding-left: 45px;
font-size: 13px;
background: #ffffff;
margin-left: 165px;
}
#block-block-3 h2 {
font-weight: lighter;
color: #242424;
}
Посмотрим на результаты.
На этом я заканчиваю уроки цикла От А до Я. Надеюсь эти уроки стали для вас полезными. Вы получили инструменты для дальнейшей работы и учебы... Создайте остальные страницы. Практикуйтесь. И у вас все получиться.
Как и обещал, вот ссылка на сайт который мы создали по этим урока. Возможно он вам поможет для дальнейшей учебы. Модули, переводы, версия cms drupal 7 — обновлены до последних версий на день написания этой статьи.
Добавить пост 