Дизайн CSS-профи: Пример собственного дизайна II
Тема восстановлена.
Дата первой публикации: 27.03.2008, 22:14
Источник: http://free-picture.de.tl/Eigenes-Design-erstellen.htm
Автор: free-picture
Перевод с немецкого: meinhart
Внимание:
По профессиональному дизайну "CSS" тех. поддержка на форуме не оказывается !
Предполагаются начальные знания в области CSS / классов / HTML !
Это пособие описывает классы дизайна CSS и показывает наглядно одну из многих возможностей, создания собственного дизайна с помощью CSS .
Рекомендуется изменять дизайн как описано по шагам сохраняя и проверяя результат. Тогда вы сможете наглядно увидеть результат ваших изменений и научитесь создавать собственный дизайн. Для простоты изложения мы отказались от излишеств, поэтому нам не понадобятся адреса картинок или изображений. Их вы сможете добавить сами. Содержание вашего сайта естественно сохранится, но правые поля показываться не будут. Вы можете сохранить их содержание у себя в текстовых файлах и вставить позже.
Кроме того вы можете в любое время вернуться к вашему старому дизайну просто выбрав его в разделе "Выбор дизайна".
1 шаг: Выбор дизайна
- войти в систему
- перейти в раздел "Выбор дизайна"
- выбрать "CSS дизайн"
Мы используем следующие классы дизайна "CSS"
#header_container = Поле хидера вверху
nav_container = Поле навигации
li.nav_element = Ссылки в навигации
#content = Текстовое поле
#sidebar_container = 1 правое поле
#counter = Счетчик
С помощью margin-left: и top можно перемещать классы "#Klasse" на экране.
Изменяя width и height можно задавать нужный размер каждого поля.
2 шаг: Удаляем "лишние классы"
- Перейдите в "Расширенные установки"
В отличие от других дизайнов здесь имеются три поля для вставки CSS кодов:
- текст над дизайном
- текст под дизайном
- и CSS-Код без тэгов стиля.
"Без тэгов стиля" означает, что вставляемый здесь код не должен содержать тэги
<style type="text/css"> <!-- и --> </style>
Вставим следующее содержание в поле "CSS-Код без тэгов стиля" :
Цитата: #extraDiv1 {display: none;}
#extraDiv2 {display: none;}
#extraDiv3 {display: none;}
#extraDiv4 {display: none;}
#extraDiv5 {display: none;}
#extraDiv6 {display: none;}
#pre_header {display: none;}
#post_header {display: none;}
#pre_content {display: none;}
#nav_heading{display: none;}
div.header{display: none;}
h1#title{display: none;}
h2#title span {display: none;}
С помощью #Имя класса {display: none;} в этом коде мы удаляем классы
3 шаг: Форматирование ссылок
Этот код изменяет цвет и размер всех текстовых ссылок твоего сайта.
- вставляем в поле "CSS-Код без тэгов стиля":
- оставь пустую строку между предыдущим кодом и этим
- это облегчит поиск нужного фрагмента кода
Цитата: a{
color:#4A9AF6;
text-decoration: none;
font-size:13px;}
a:hover {
color: #4A9AF6;
font-size: 13px;
text-decoration: none;}
a:link {
color: #4A9AF6;
font-size: 13px;
text-decoration: none;}
a:active {
color: #4A9AF6;
font-size: 13px;
text-decoration: none;}
a:visited {
color: #4A9AF6;
font-size: 13px;
text-decoration: none;}
Пояснение:
a = Ссылка
a:hover = когда курсор мыши находится на ссылке
a:link = еще не было перехода по этой ссылке
a:active = ссылка по которой только что был переход
a:visited = посещенные страницы
Естественно можно изменить цвета и размеры в коде.
4 шаг: Фон и дополнительный класс
- вставляем в поле "CSS-Код без тэгов стиля":
- оставь пустую строку между предыдущим кодом и этим
- это облегчит поиск нужного фрагмента кода Цитата:
body {
background-color:#000000;}
*{ padding: 0; margin: 0; }
#Mein_Bild {
margin: 0 auto;
width: 980px;
height:500px;
background-image:url(ЗДЕСЬ_URL_картинки);}
Пояснение:
background-color:#000000; = Цвет фона (здесь черный)
#Mein_Bild = Новый класс
В background-image:url(ЗДЕСЬ_URL_картинки); Здесь нужно внести URL адрес картинки фона. Размер картинки должен быть 980 x 500.
Важно: класса #Mein_Bild нет в дизайне. Это наш новый класс.
Когда мы добавляем новые классы, их надо "объявить" в поле "Текст над дизайном" с помощью тега <div>: <div id="Здесь имя класса"> и закрыть тег в поле "Текст под дизайном" </div>. Только после этого класс станет видимым.
Поэтому внесем в "Текст над дизайном" Цитата: <div id="Mein_Bild">
и в "Текст под дизайном"
Коды должны стоять в самом верху этих полей. Теперь фон показывается.
5 шаг: хидер
В дизайне "CSS" класс хидера называется #header_container.
Если хидер не нужен просто введи в поле "CSS-Код без тэгов стиля" Цитата: #header_container {display:none;}
и переходи к шагу 6!
- если хочешь иметь хидер внеси следующий код в поле "CSS-Код без тэгов стиля"
Цитата: #header_container {
position: absolute;
left: 50%;
margin-left:-490px;
width: 980px;
height:70px;
background-color:#343434;
background-image:url();
color:#FFFFFF;
font-size:13px;
border: 1px solid #FFFFFF;}
Пояснение:
- margin-left: = смещение хидера от левого края
- width: = ширина хидера
- height: = высота хидера
- background-color = цвет фона хидера
- background-image:url(); = фоновую картинку (URL) вставить в скобки
- картинка должна быть такого же размера, как хидер!
- color:#000000; = цвет текста в хидере (если предполагается располагать текст)
- font-size:13px; = размер текста
- border: 1px solid #FFFFFF = рамка / ширина рамки / цвет рамки
6 шаг: текстовое поле
В дизайне "CSS" класс текстового поля называется #content.
- внеси следующий код в поле "CSS-Код без тэгов стиля"
Цитата: #content {
position: absolute;
left: 50%;
top: 140px;
margin-left:-320px;
width: 590px;
height: 380px;
padding:10px;
color: #F2F2F2;
font-size:13px;
background-color:#343434;
background-image:url();
border: 1px solid #FFFFFF;
overflow:auto;}
Пояснение:
- top: = смещение текстового поля от верхнего края
- margin-left: = смещение текстового поля от левого края
- padding:10px; = смещение содержания 10 Pixel от краев поля
- width: = ширина текстового поля
- height: = высота текстового поля
- background-color = цвет фона текстового поля
- background-image:url(); = фоновую картинку (URL) вставить в скобки
- картинка должна быть такого же размера, как текстовое поле!
- color:#000000; = цвет текста в текстовом поле
- font-size:13px; = размер текста
- border: 1px solid #C9C9C9 = рамка / ширина рамки / цвет рамки
- overflow:auto;} = создает полосу прокрутки текстового поля
Вместо указания цвета можно задать background-color:transparent. Тогда будет показываться картинка основного фона!
7 шаг: правые поля
В дизайне "CSS" класс правого поля называется #sidebar_container.
- внеси следующий код в поле "CSS-Код без тэгов стиля"
Цитата: #sidebar_container{
position: absolute;
left: 50%;
top:140px;
margin-left: 300px;
width: 190px;
height: 400px;
background-color:#343434;
background-image:url;
border:1px solid #FFFFFF;
color:#000000;
overflow:auto;}
Пояснение:
- top: = смещение поля от верхнего края
- margin-left: = смещение поля от левого края
- width: = ширина поля
- height: = высота поля
- background-color = цвет фона поля
- background-image:url(); = фоновую картинку (URL) вставить в скобки
- картинка должна быть такого же размера, как правое поле!
- color:#000000; = цвет текста
- font-size:13px; = размер текста
- border: 1px solid #C9C9C9 = рамка / ширина рамки / цвет рамки
- overflow:auto;} = создает полосу прокрутки правого поля
Вместо указания цвета можно задать background-color:transparent. Тогда будет показываться картинка основного фона!
8 шаг: навигация
Классы:
- навигация #nav_container
- кнопка навигации li.nav_element a
- "Hover-Effekt" кнопки навигации li.nav_element a:hover
Внеси следующий код в поле "CSS-Код без тэгов стиля"
Цитата: #nav_container{
position: absolute;
left: 50%;
top:140px;
margin-left: -490px;
width: 160px;
border:1px solid #FFFFFF;}
ul#nav{
width: 130px;
padding: 0px;
margin: 0px;}
li.nav_element{
list-style-type: none;
position: relative;
padding:5px;
width: 115px;}
li.nav_element a{
display: block;
width: 115px;
padding:4px;
font-weight: bold;
text-decoration: none;
text-align: left;
color:#F2F2F2;
background-color:#343434;
background-image:url(BUTTON-ULR_1);
border: 2px solid #000000;}
li.nav_element a:hover{
color: #000000;
background-color:#C9C9C9;
background-image:url(BUTTON-URL_2);}
Пояснение:
Положение поля навигации #nav_container определяется значениями top и margin-left
Для изменения кнопок навигации используй классы:
- #li.nav_element a
- и #li.nav_element a:hover
- :hover = когда мышь находится на кнопке
Значение color:#000000; изменяет цвет текста в кнопке.
Если кнопки должны быть шире, измени значение width (ширина) также для классов:
- #nav_container
- ul#nav
- li.nav_element
- li.nav_element a
8 шаг: счетчик
В дизайне "CSS" класс счетчика называется #counter.
Активируй счетчик в разделе "расширения".
Внимание:
Если ты ввел длинный текст до и после цифр увеличь значение width так, чтобы текст умешался в одну строку.
- вставляем в поле "CSS-Код без тэгов стиля":
- оставь пустую строку между предыдущим кодом и этим
- это облегчит поиск нужного фрагмента кода Цитата: #counter {
position: absolute;
left: 50%;
top:30px;
margin-left: 300px;
width: 150px;
height:20px;
color:#FFFFFF;
font-size:13px;
border: 1px solid #FFFFFF;}
Пояснение:
- top: = смещение счетчика от верхнего края
- margin-left: = смещение счетчика от левого края
- width: = ширина счетчика
- height: = высота счетчика
- color:#FFFFFF; = цвет текста счетчика
- font-size:13px; = размер текста
- border: 1px solid #FFFFFF = рамка / ширина рамки / цвет рамки |
