Rambler's Top100
, : |

! : http://dreamweaver.net.ru/new-forum/

| FAQ | | |

как в Dw изменить цвет и стиль ссылки
.  1, 2, 3  .
 
  ,         .     ,        .     Форум Macromedia Dreamweaver -> HTML & CSS
 
lyuba
Новичок

Новичок


: 37

: 11.06.2005
: 20

: 14, 2005 5:59 pm     :

Спасибо за ответы! только вот работать с кодами я еще не умею.... Вот думаю, может я что-то не правильно делаю? Создание стиля занимает 3 шага:
1) я создаю Новый стиль, как отдельный файл с сменем, например "1"
2) нажимаю снова плюсик (в стилях) и выбирию тег, например "а", а внизу выбираю мой недавно созданный файл "1" и назначаю различные параметры шрифта ... и т.д.
3) я опять нажимаю плюсик и выбираю сверху link, а снизу также файл "1", и задаю свойства (также затем создаю свойства поочередно для активной ссылки, при наведении и т.д.)

И как только я нажимаю ОК, как по волшебству у меня все ссылки на сайте меняются, задаю второй стиль они опять все меняются Shocked

Может я что упустила? подскажите пожалуйста
Денис
Модератор

Модератор


: 42

: 21.08.2004
: 1490
: Санкт-Петербург

: 14, 2005 7:43 pm     :

:

только вот работать с кодами я еще не умею


Учитесь. Если что непонятно - спрашивайте!

Вот как сделать класс, который будет переопределять стиль Ваших ссылок:

1. Нажимаете "+" и в верхний выпадающий список вводите Ваш тег "А"
2. Чуть ниже ставите галочку напротив пункта "Tag..."? тем самым указывая, что Вы определяете стиль для определенного тега.
3. В списке "Define In" выбираете "New Style Sheet File". Это означает, что Ваш стиль будет находиться в отдельном файле.
4. Нажимаете "ОК"
5. Сохраняете Ваш файл стилей.
6. В появившемся окне устанавливаете какие душе угодно преференции.
7. Нажимаете "Apply" и "ОК"

Пример:
[code:1:397da9c69b]
a:link {
color: #000000;
text-decoration: none;
}
[/code:1:397da9c69b]

(По умолчанию стиль называется просто "a". Измените его так, как указано в примере. Дальше объясню, зачем это) Мы создали стиль, используемый по умолчанию для всех ссылок. Однако, при нажатии ссылки, при наведении на нее указателя мыши и в активном состоянии цвета будут такими, которые приняты по умолчанию в броузере. Неинтересно, правда? Разнообразим немного наши ссылки.

8. Открываете Ваш файл CSS.
9. Выделите тот код, который в нем есть (имеется в виду тот код, который Вы видите на примере) и скопируйте его 3 раза в тот же файл, только чуть ниже.
10. Переименуйте скопированный код вот так:

[code:1:397da9c69b]
a:visited {
text-decoration: none;
color: #FF0000;
}
a:hover {
text-decoration: underline;
color: #00FF00;
}
a:active {
text-decoration: none;
color: #0000FF;
}

[/code:1:397da9c69b]

Мы создали стили для состояния "hover", "active" и "visited", т.е. посещенная ссылка. Вот для чего мы их переименовывали. Измените параметры по Вашему усмотрению так же, как и в предыдущем пункте. При наступлении соответствующего состояния, Ваша ссылка будет менять цвет (или что Вы там изменили).

Теперь рассмотрим вариант, когда необходимо сделать два типа ссылок, например, обычные (скажем, "нежирные") и важные (выделенные жирным шрифтом). Для этого:

1. Скопируйте все только что созданные стили.
2. Измените код вот так:

[code:1:397da9c69b]
a.usual:link { код стиля }
[/code:1:397da9c69b]

Расшифрую название: "a" обозначает, что стиль основан на теге "<a>", "usual" - имя Вашего новго стиля, ":link" - состояние ссылки. Измените весь код вот так:

[code:1:397da9c69b]
a.usual:link {
color: #000000;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
}
a.usual:visited {
text-decoration: none;
color: #FF0000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
}
a.usual:hover {
text-decoration: underline;
color: #00FF00;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
}
a.usual:active {
text-decoration: none;
color: #0000FF;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
}

[/code:1:397da9c69b]
Вот, собственно, и вся недолга. "Прилинкуйте" созданный файл стилей соответствующим образом. Проверим созданные стили:

[code:1:397da9c69b]
<a href="#">Обычная ссылка</a><br>
<a href="#" class="usual">Необычная ссылка</a>
[/code:1:397da9c69b]

Откройте Вашу страницу в броузере и посмотрите, что получилось...
lyuba
Новичок

Новичок


: 37

: 11.06.2005
: 20

: 15, 2005 7:44 am     :

Денис, спасибо большое за ответ, хотела уточнить, что означает ""Прилинкуйте" созданный файл стилей соответствующим образом? "
sandro
Модератор

Модератор


: 53

: 21.08.2004
: 95

: 15, 2005 3:32 pm     :

lyuba ():
"Прилинкуйте"

привяжите...
lyuba
Новичок

Новичок


: 37

: 11.06.2005
: 20

: 15, 2005 5:40 pm     :

а, понятно, спасибо!
dificit
Новичок

Новичок


: 39

: 02.03.2006
: 18

: 03, 2006 8:27 am     :

Здравствуйте. Понимаю, много написано по поводу css, все читаю, но все равно не работает. Может я зациклился на одном, и не вижу очевидной ошибки, не знаю. Ниже привожу HTML, CSS коды-посмотрите, подскажите. Спасибо
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=1251">
<title>Мой сайт</title>

<link href="main.css" rel="stylesheet" type="text/css">
</head>
<body>
<table align="center" border="0" cellpadding="1" cellspacing="0" width="900">
<tr><td align="center" colspan="2" valign="top" height="100">
<!-- head -->
<table align="center" bgcolor="ba0000" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr><td height="100" width="100%"></td></tr>
</table>
<!-- end of head -->
</td></tr>
<tr>
<td align="left" width="15%" >
<!-- menu -->
<div align="center"><table align="center" bgcolor="ba0000" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="100%" height="501" valign="top">
<p align="center" class="link menu"><a href="1.html">ccылка 1</a></p>
<p align="center" class="link menu"><a href="2.html">ссылка 2</a></p>
<p align="center" ><a href="3.html" class="link menu">ссылка 3</a></p>
</td></tr>
</table>
</div>
<!-- end of menu -->
</td>
<td align="center" width="75%">
<!-- content -->
<table align="center" bgcolor="ba0000" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr><td align="center" width="100%" height="501">Контент
</td>
</tr>
</table>
<!-- end of content -->
</td>
</tr>
</table>
</body>
</html>







.link menu:link
{font-size:12px;
font-family:Arial, Helvetica, sans-serif;
text-decoration:none;
color: #FFFFFF;
margin-left: 25pt;}
.link menu:visited
{ font-size:12px;
font-family:Arial, Helvetica, sans-serif;
margin-left: 25pt;
text-decoration:none; color:#CCCCCC;
}
.link menu:active
{ font-size:12px;
font-family:Arial, Helvetica, sans-serif;
margin-left: 25pt;
text-decoration:none;
color: #0000FF;
}
.link menu:hover
{ font-size:12px;
font-family:Arial, Helvetica, sans-serif;
margin-left: 25pt;
text-decoration:none;
color: #0000FF;
}
OldFornit
Модератор

Модератор


: 36

: 12.05.2005
: 846

: 03, 2006 8:44 am     :

в стилевке ошибка. Очень грубая.

.link menu:link

обозначает, что свойства будут применятся для элементов с влассом menu:link внутри элементов с классом link. Это раз.

Самая грубая ошибка в html-коде -

p align="center" class="link menu"> - обозначает, что абзацу присваиваются сразу 2 класса - и link и menu

И последнее - событие :hover корректно обрабатывается Explorer'ом только для тэга <а>.

Остальные, более мелкие ошибки, озвучивать пока бесполезно
dificit
Новичок

Новичок


: 39

: 02.03.2006
: 18

: 03, 2006 8:49 am     :

Спасибо. Сейчас буду пробовать исправлять.
dificit
Новичок

Новичок


: 39

: 02.03.2006
: 18

: 03, 2006 9:49 am     :

Исправил. Теперь css выглядит вот тка:

. menu:link
{font-size:12px;
font-family:Arial, Helvetica, sans-serif;
text-decoration:none;
color: #FFFFFF;
padding-left:1em;
width:100%;
}
. menu:visited
{ font-size:12px;
font-family:Arial, Helvetica, sans-serif;
padding-left:1em;
width:100%;
text-decoration:none;
color:#CCCCCC;
}
. menu:active
{ font-size:12px;
font-family:Arial, Helvetica, sans-serif;
padding-left:1em;
text-decoration:none;
color: #0000FF;
width:100%;
}
. menu:hover
{ font-size:12px;
font-family:Arial, Helvetica, sans-serif;
padding-left:1em;
text-decoration:none;
width:100%;
color: #0000FF;
}

и все же не работает. Пробовал ставить css, которую , на предыдущей странице приводил sandro, все работает. В чем разница между нашими таблицами, и где ошибка. Все классы,по замечанию OldFornit'a перенес в тег <a>.
OldFornit
Модератор

Модератор


: 36

: 12.05.2005
: 846

: 03, 2006 10:30 am     :

а ничего, что классы присваются тэгу <p>, а надо бы к <a>?
dificit
Новичок

Новичок


: 39

: 02.03.2006
: 18

: 03, 2006 11:12 am     :

И последнее - событие :hover корректно обрабатывается Explorer'ом только для тэга <а>.



переделал только для этого
OldFornit
Модератор

Модератор


: 36

: 12.05.2005
: 846

: 03, 2006 11:30 am     :

тогда давайте окончательный варинт кода. Я diffом не работаю ))
dificit
Новичок

Новичок


: 39

: 02.03.2006
: 18

: 03, 2006 11:59 am     :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=1251">
<title>Мой сайт</title>

<link href="main.css" rel="stylesheet" type="text/css">
</head>
<body>
<table align="center" border="0" cellpadding="1" cellspacing="0" width="900">
<tr><td align="center" colspan="2" valign="top" height="100">
<!-- head -->
<table align="center" bgcolor="ba0000" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr><td height="100" width="100%"></td></tr>
</table>
<!-- end of head -->
</td></tr>
<tr>
<td align="left" width="15%" >
<!-- menu -->
<div align="center"><table align="center" bgcolor="ba0000" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="100%" height="501" valign="top">
<p><a href="1.html" class="menu">ccылка 1</a></p>
<p><a href="2.html" class="menu">ссылка 2</a></p>
<p><a href="3.html" class="menu">ссылка 3</a></p>
</td></tr>
</table>
</div>
<!-- end of menu -->
</td>
<td align="center" width="75%">
<!-- content -->
<table align="center" bgcolor="ba0000" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr><td align="center" width="100%" height="501">Контент
</td>
</tr>
</table>
<!-- end of content -->
</td>
</tr>
</table>
</body>
</html>



СSS уже дал выше
OldFornit
Модератор

Модератор


: 36

: 12.05.2005
: 846

: 03, 2006 12:15 pm     :

молодой человек, Вы в курсе, что в стилевке после точки пробела быть не должно!
Исправляйтесь
dificit
Новичок

Новичок


: 39

: 02.03.2006
: 18

: 03, 2006 12:29 pm     :

Если чесно, то не знал. Ошибку исправил, и теперь все нормально. Спасибо за помощь.
:   
  ,         .     ,        .     Форум Macromedia Dreamweaver -> HTML & CSS : GMT + 2
.  1, 2, 3  .
2 3

 


Powered by phpBB © 2001, 2005 phpBB Group
phpBB


/ : 134825 / 0

Rambler's Top100 @Mail.ru