Общее Расширения Картинки Мультимедиа Коды Дизайн ЧаВо Поиск

meinhart

Iceblue1

Свободное изменение дизайна IceBlue. Часть I.

Потеряется ли содержание при описанных здесь изменениях?
При изменении дизайна содержание вашего сайта не меняется. Меняется лишь внешний вид. Если вы уже выбрали дизайн IceBlue, то и содержание правых полей сохранится. Если же у вас другой дизайн, то после смены на IceBlue поля будут пустыми. Не пугайтесь. Когда вы вернетесь обратно в ваш дизайн все восстановится. Так что не бойтесь экспериментировать.

Вступление.
В этом пособии, состоящем из двух частей, я покажу как можно средствами CSS настроить дизайн IceBlue.
В первой части мы
- познакомимся с основными классами,
- расширим дизайн так, чтобы он автоматически подстраивался под размер окна,
- заменим область над и под текстовой частью и
- поменяем фон центральной части дизайна.
Во второй части, которая выйдет несколько позже, заменим все остальные элементы.
Для всего этого не обязательно знать CSS, а просто внимательно следовать инструкции. Забытая скобка или ; могут означать часы поиска ошибки. Поэтому прошу отнестись с пониманием к тому, что мы не можем оказывать техподдержку в таких случаях.
Но в принципе не все так страшно. Так что начнем.

Расширение дизайна IceBlue
Дизайн IceBlue разбит по ширине на четыре области: слева - навигация, затем центральная часть с основным содержанием, правые поля и фон за правыми полями. (см. схему дизайна)
В стандартном виде ширина этих полей фиксирована:

Навигация: 185 пикселей
Текст: 568 пикселей
Правые поля: 160 пикселей

Преимущество фиксированной ширины в том, что страница показывается одинаково как на 19", так и на 17" мониторе.
На 19" область справа просто будет заполнена фоном. То есть вы, как создатель сайта, можете быть уверенным, что центральная часть не растянется в ширину при большем разрешении монитора.
Если это не важно и вы хотите чтобы страница автоматически подстраивалась под размер окна, то сделать это нетрудно.
Надо просто изменить фиксированную ширину некоторых классов на процентную.
Сложно звучит? На практике все гораздо проще!
- зайдите в раздел "Выбор дизайна" и выберите IceBlue
- в поле "расширенные установки" -> "текст над дизайном" внесите следующий код
<style type="text/css">
<!--
table.edit_main_table{width: 100% !important;}
td.edit_main_tr{width: 100% !important;}
table.edit_second_table{width: 100% !important;}
td.edit_header_full{width: 100% !important;}
td.edit_header_full table{width: 100% !important;}
table.edit_third_table{width: 100% !important;}
td.edit_navi_headbg{width: 185px !important;}
table.edit_rechts_tabelle{width: 100% !important;}
td.edit_rechts_bottom{width: 15% !important;}
td.edit_rechts_cbg{width:100%;}
-->
</style>

Значения 15% и 185px можно изменить, задать абсолютные значения в пикселях или процентные. Пока оставим их без изменения.
Вот собственно и все к вопросу расширения дизайна.
После сохранения получится примерно следующая картинка.

Что произошло?
Первая новость хорошая: мы добились своей цели и центральная часть расширилась. Не правда ли?
Вторая - так себе: "шапка" над текстом и сам текст выглядят мягко говоря странно.
Почему? Потому что они имеют вертикальные линии, а наши изменения заставляют повторять картинки, взятые в их основу. Вернемся к схеме дизайна и посмотрим, что нужно заменить. Шапка над текстом называется edit_content_top, само содержание - edit_content, еще ниже edit_content_bottom и наконец edit_content_bottom2. Будем их изменять. Лучше это делать в обычном "блокноте" (notepad.exe)
Напишем заготовку для CSS кода.
<style type="text/css">
<!--
Наш код будет здесь
-->
</style>

Теперь напишем сюда классы, которые мы хотим поменять, ставя "td." перед ними:
<style type="text/css">
<!--
td.edit_content_top
td.edit_content
td.edit_content_bottom
td.edit_content_bottom2
-->
</style>

Пока это ничего не дает, но хотя бы видно что меняем. Осталось только добавить свойства к этим классам:
<style type="text/css">
<!--
td.edit_content_top{height: 33px;background-image: url();background-color:#XXXXXX;}
td.edit_content{background-image: url();background-color: #XXXXXX;}
td.edit_content_bottom{height: 33px;background-image: url();background-color:#XXXXXX;}
td.edit_content_bottom2{height: 33px;background-image: url();background-color:#XXXXXX;}
-->
</style>
height: высота в пикселях
background-image: none: URL-адрес фона
background-color:#XXXXXX; цвет фона в формате #XXXXXX

Поменяем картинку для наших классов. Но где взять URL?
1-я возможность:
Сделать самому картинку и загрузить себе на страничку. Затем правой кнопкой открыть в новом окне и взять URL из адресного поля браузера.
2-я возможность:
Помнится meinhart врал, что немцы уже все наработали. Посмотрим, что у них есть например здесь http://hpbk-webdesign.de.tl/Design24.htm
Видим картинку

На ней шапка над текстом проходит сплошной полосой. Значит подойдет!
Для тех, кто хочет быстро иметь результат:
Что-то как-то все заумно. А может вообще не читать дальше, а просто скопировать себе код? Вставить его в "поле над дизайном" и дело с концом? Тем более выбор-то есть. Тоже вариант! Дополнительно можете посмотреть http://deluxe4you.de.tl/Designs4you2.htm , http://bannerlist.de.tl/Alles-f.ue.r-die-HP.htm или http://ru.gg/forum/viewtopic.php?t=96 со ссылками.
Тем кто нас покинул на этом предложении - до свидания. Возможно вы еще вернетесь к этой теме, когда захотите сделать что-то свое, чего вообще ни у кого нет. А мы продолжим.
В тексте кода ищем "td.edit_content_top" и находим интересующую нас картинку: https://img.webme.com/pic/d/design-24/vista1.gif . Возьмем ее же и для td.edit_content_bottom2.
<style type="text/css">
<!--
td.edit_content_top{height: 33px;background-image: url(https://img.webme.com/pic/d/design-24/vista1.gif);background-color:#XXXXXX;}
td.edit_content{background-image: none;background-color: #XXXXXX;}
td.edit_content_bottom{height: 33px;background-image: none;background-color:#XXXXXX;}
td.edit_content_bottom2{height: 33px;background-image: url(https://img.webme.com/pic/d/design-24/vista1.gif);background-color:#XXXXXX;}
-->
</style>

Что будем делать с основным содержанием? Может просто поменять цвет? Но где я возьму этот код? Да еще в таком смешном формате!
Посмотрим, что можно взять у прародителя ru.gg к примеру здесь http://coolplace.de.tl/Farb_W.ae.hler.htm
Вот и Colorpicker. Для Firefox надо спуститься немного ниже. Выберем цвет и заберем наш код. Например светло желтый #ffffcc
Пока не будем заботиться о внешнем виде и возьмем просто для наглядности что-нибудь другое для td.edit_content_bottom. Например голубой #99ffff:
<style type="text/css">
<!--
td.edit_content_top{height: 33px;background-image: url(https://img.webme.com/pic/d/design-24/vista1.gif);background-color:#XXXXXX;}
td.edit_content{background-image: none;background-color: #ffffcc;}
td.edit_content_bottom{height: 33px;background-image: none;background-color: #99ffff;}
td.edit_content_bottom2{height: 33px;background-image: url(https://img.webme.com/pic/d/design-24/vista1.gif);background-color:#XXXXXX;}
-->
</style>

Добавим что получилось в поле "Текст над дизайном",естественно не стирая предыдущий код.
Сохраним и проконтролируем результат.
Выглядит уже лучше!
- cтраница подстраивается под размер окна,
- центральная часть цельная.

Не мешало бы конечно заменить кнопки навигации, хидер, фон за дизайном и фон за правыми полями! Но об этом в следующей части.
А пока можно попробовать самому. Тем более, что первое знакомство с классами уже состоялось и где они находятся мы знаем из схемы дизайна.
Продолжение смотри в теме Свободное изменение дизайна IceBlue II.
 
Всего 125793 посетителей
Другие сайты о ru.gg:
Этот сайт был создан бесплатно с помощью homepage-konstruktor.ru. Хотите тоже свой сайт?
Зарегистрироваться бесплатно