Nadin Design  
EnglishFrenchGermanItalianDutchRussianPortugueseJapaneseKorean ArabicChinese Simplified Spain
Творческая мастерская профессора Трубочкиной Надежды Константиновны
 
Web-дизайн (WD)


    Задания по курсу "Web-дизайн" и "Web-технологии" (1-ое продолжение)


CSS


При вставке текстовой информации в ячейки таблиц, текст выглядит неряшливо:

"рваный" правый край (по умолчанию align=left);

"прилипание" к другим объектам (отступы нулевые):

Эту проблему можно решить следующим образом: создать классы с конкретными параметрами и "приписать" эти классы объектам.

Создание класса

Откройте, если она еще не открыта, панель CSS STYLES: Windows-CSS Styles, или нажмите Shift+F11. И нажмите на пиктограмму New CSS Rule, с помощью которой можно создать новое правило верстки.

В открывшемся окне New CSS Rule задайте тип правила Class, имя правила (в данном случае, justify) и задайте место, где это правило будет сохранено.

Лучше создать один файл правил, которые будут одинаковы для всего сайта, это позволит сделать сайт в едином стиле. При нажатии кнопки OK, откроется окно Save Style Sheet File As, в котором нужно указать имя файла стилей (например, style) и путь к нему.

Совет: в корневой папке сайта создайте папку CSS, и сохраняйте туда css-файлы.

После нажатия кнопки Сохранить, окроется окно CSS Rule Definition, где вы сможете задать нужные вам параметры:

для текста:

для абзацев:

для отступов:

После нажатия на кнопку OK будет сохранен файл стилей style.css по указанному пути и с определенными параметрами, и в html-коде появится ссылка на css-файл в головной части.

В кодо-визуальном редакторе выделите нужный объект (в нашем случае абзац), в поле Class выберите нужный класс (правило), в нашем случае justify,

и вы увидете желаемое изменение своего абзаца, он будет прямоугольным, как в хорошей газетной колонке:

Повторите это действие столько раз сколько нужно.

Главное меню

Еще одной проблемой является цвет и вид ссылок (кнопок), в том числе и главного меню.

С помощью стилей CSS (файл buttons.css) кнопки-ссылки, которые всегда одного цвета (без стиля), можно превращать в довольно симпатичные кнопки с тремя состояниями.

Итак создайте новый класс button (первое состояние) и задайте параметры:

Первое состояние кнопки - такой она появляется в браузере. Класс .button

Создав класс, задаем параметры.

 

В этой категории задаются параметры шрифта на кнопке.

Text-decoration: none означает, что ссылка не подчеркивается.

Цвет кнопки.

Inline-block — это значение, которое можно назначить свойству display. Название происходит от некоторых характеристик как строчного, так и блочного элементов.

  • Блочные (block) элементы имеют высоту, ширину, paddingmargin, border, а также располагаются вертикально, друг под другом.
  • Строчные (inline) элементы располагаются горизонтально, друг за другом.
  • Элементы inline-block обладают характеристиками как блочных, так и строчных элементов.

Расстояния от текста до границ кнопки:

Top - сверху;

Bottom - до дна;

Right - справа;

Left - слева.

Цвет границы.

 

Второе состояние кнопки (вид кнопки при наведении). Класс .button:hover

Остальные категории в этом классе пустые.

Изменение цвета кнопки при наведении.

 

Третье состояние кнопки (вид при нажатии). Класс .button:active

Остальные категории в этом классе пустые.

Подъем на 1 пиксел вверх относительно предыдущей позиции.

 

Основные файлы главной навигации этого примера

html-файл buttons.css

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Главная навигация</title>
<link href="css/buttons.css" rel="stylesheet" type="text/css" />
</head>

<body>
<br>
<br>

<table width="960" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="200" align="center">&nbsp;</td>
<td align="center" ><a href="index.html">Главная</a> </td>
<td align="center" ><a href="prod.html">Продукты </a> </td>
<td align="center" ><a href="obz.html">Обзоры </a> </td>
<td align="center" ><a href="zagr.html">Загрузки </a> </td>
<td align="center" ><a href="news.html">Новости </a> </td>
<td align="center" ><a href="contacts.html">Контакты </a> </td>
<td width="200" align="center">&nbsp;</td>
</tr>
</table>
<p>&nbsp;</p>
<table width="960" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="100" align="center">&nbsp;</td>
<td align="center"><a href="index.html" class="button">Главная</a></td>
<td align="center"><a href="prod.html" class="button">Продукты </a></td>
<td align="center"><a href="obz.html" class="button">Обзоры </a></td>
<td align="center"><a href="zagr.html" class="button">Загрузки </a></td>
<td align="center"><a href="news.html" class="button">Новости </a></td>
<td align="center"><a href="contacts.html" class="button">Контакты </a></td>
<td width="100" align="center">&nbsp;</td>
</tr>
</table>
</body>
</html>

@charset "windows-1251";
/* CSS Document */

.button {
-moz-box-shadow:inset 0px 1px 0px 0px #f29c93;
-webkit-box-shadow:inset 0px 1px 0px 0px #f29c93;
box-shadow:inset 0px 1px 0px 0px #f29c93;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fe1a00), color-stop(1, #ce0100) );
background:-moz-linear-gradient( center top, #fe1a00 5%, #ce0100 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fe1a00', endColorstr='#ce0100');
background-color:#fe1a00;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #d83526;
display:inline-block;
color:#ffffff;
font-family:arial;
font-size:15px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
text-shadow:1px 1px 0px #b23e35;


}.button:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ce0100), color-stop(1, #fe1a00) );
background:-moz-linear-gradient( center top, #ce0100 5%, #fe1a00 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ce0100', endColorstr='#fe1a00');
background-color:#ce0100;


}.button:active {
position:relative;
top:1px;
}

 

 

 

 

Вид в Dreamweaver'e:

Вы можете поэкспериментировать со стилем кнопок, меняя файл buttons.css.

И даже можете сделать выпадающее меню, если заглянете на сайт:

http://www.psdgraphics.com/templates/black-horizontal-html-and-css-dropdown-menu/

 

 

 

Далее подробно о том, как создать главную навигацию с выпадающими меню

 

 

 

 

© 1998-2015 ND  
Сделать стартовой Напечатать страницу Назад  
Добавить в избранное Закрыть окно Вперед
Яндекс цитирования Rambler's Top100