Делаем резиновый сайт

Опубликовано: 2019-05-23
Редактировалось: 8 раз — последний 10 мая 2013
Просмотров: 1177
Настроение: Отличное
+1
: 1
Резиновый сайт в Artisteer можно сделать опционально, однако резиновую шапку для сайта, состоящую из красивого рисунка, который бы занимал всю площадь программа сделать не может. Вернее предлагаются только довольно ограниченные возможности. В этой статье я постараюсь рассказать как в шапку сайта добавить дополнительные объекты. Я не буду делать какого-то выдающегося дизайна, а просто объясню принцип создания резинового header.
Для начала создадим сам верхний колонтитул, то есть зададим цвет, текстуру и градиент ( Вы можете вставить свой рисунок и не задавать данные параметры ):


Далее добавляем первый рисунок:


После этого экспортируем наш шаблон например Untitled (это будет основная папка с нашим шаблоном). После экспорта убираем первый рисунок и вставляем второй, который позиционируем немного правее первого.


Далее экспортируем шаблон опять, но уже с другим именем Untitled2 ( это будет вспомогательная папка).
Далее проделываем следующее открываем папку images в вспомогательном шаблоне находим там рисунок header-object.png, переименовываем его например header-object2.png, и переносим в папку images основного шаблона Untitled. После этого открываем страницу основного шаблона page.html ( или index.php, в зависимости от того какой шаблон делаем ) и находим строки класса:


Копируем <div class="art-headerobject"></div> и переименовываем скопированный класс в <div class="art-headerobject2"></div>.
Открываем файл стилей .css в файле Untitled2 (вспомогательного шаблона) и копируем стили art-headerobject в стили шаблона Untitled (основного шаблона) изменяя название класса на art-headerobject2, не забывая в этом классе поменять и название картинки на header-object2.png


Теперь незабываем скопировать и переименовать стили из файлов .css для IE6-7. В результате мы открыв теперь наш шаблон в браузере (если это шаблон CMS, предварительно установив его) получим следующее:


Теперь если мы посмотрим данный шаблон на разных разрешениях экрана монитора то увидим как наши рисунки размещаются пропорционально по поверхности шапки сайта.

Как можно ипользоватьданный урок? Я привел лишь технологию добавления рисунка, все остальное зависит от воображения мастера. Например на нашем сайте раньше стоял шаблон с такой шапкой:


Так вот на этой резиновой шапке сайта применено 7 рисунков. И шапка корректно смотрится на всех разрешениях монитора.

ЗЫ: забыл сказать, при применении нескольких рисунков (которые будут перекрывать друг друга, надо в стилях .css добавлять параметр z-index:


Который служит для вынесения картинки на передний или (если стоит минус) задний план, z-index: 1; z-index: 2; и т.д.
Комментарии (1)
skaz #
: 0
Статья осталась актуальной только для версии 3.1 в 4.0 картинки можно вставлять опционально несколько штук.

Случайное из блогов

artnikov
Доброго всем здоровья! что единственное самое главное, а остальное, как нибудь получится. После...
13 - +6
samson
Доля покупок и оказания услуг в интернете все увеличивается. Нам все больше приходится платить он лайн....
3 - +8
artnikov
Доброго всем здоровья! С наступившим ВАС и с наступающими... При переводе файлов админки WP, я как-то...
4 - +13
artnikov
Пока "есть еще" время, продолжу, с вашего разрешения... Данная тема посвещена-измененнию логина ADMIN,...
1 - +6
samson
Joomla выходит все новыми релизами, и часто возникают вопросы, на какой делать сайт, графики ниже выхода...
4 - +9