Author Topic: пара вопросов по web-мастерингу  (Read 4962 times)

0 Members and 1 Guest are viewing this topic.

Offline Martin

  • Newbie
  • *
  • Posts: 18
  • Karma: +0/-0
1. Как сделать разворачивающеся меню? (по типу как вот здесь http://www.darim.ru/ или http://www.rss.tomsk.ru/ ) Нужно использовать JS или CSS?
2. Квак сделать кнопки, чтобы при наведение мушки в них менялась картинка?
3. Есть ли теги подобные этому &nbsp ?
4. Как заменить стиль срола сбоку (т.с. вставить свою картинку)?

Offline stranger

  • Hero Member
  • *****
  • Posts: 922
  • Karma: +0/-0
    • http://
пара вопросов по web-мастерингу
« Reply #1 on: May 20, 2006, 12:47:47 »
Quote from: Martin
1. Как сделать разворачивающеся меню? (по типу как вот здесь http://www.darim.ru/ или http://www.rss.tomsk.ru/ ) Нужно использовать JS или CSS?
В большинстве случаев нужно использовать и то и другое..
Quote from: Martin
2. Квак сделать кнопки, чтобы при наведение мушки в них менялась картинка?
Смотри в css на предмет cursor.
Quote from: Martin
3. Есть ли теги подобные этому   ?
Есть - смотри спецификацию HTML 4
Quote from: Martin
4. Как заменить стиль срола сбоку (т.с. вставить свою картинку)?
А оно надобно? Я вообще сомневаюсь, что это возможно (просто не пытался такое сделать). Даже если это возможно - сомневаюсь, что будет работать во все браузерах. Кроме того, многие люди в браузерах ставят свои темы и в них весь вид конпок и скрола может выглядеть по разному и им может не понравиться такое изменение...
« Last Edit: May 20, 2006, 12:48:32 by stranger »
[span style='font-family:Geneva'][span style='font-size:8pt;line-height:100%'][span style='color:gray']Единственное условие, от которого зависит успех, есть терпение.   Л.Н.Толстой
[/span][/span][/span]

Offline Martin

  • Newbie
  • *
  • Posts: 18
  • Karma: +0/-0
пара вопросов по web-мастерингу
« Reply #2 on: May 20, 2006, 13:06:54 »
Спасибо!  
Не думал, что так быстро получу ответ в JS как делать разворачивающиеся меню (сверху вниз) хотябы примерно.
Вот заготовка сайта с кучей програмного кода. Я готовый через XaraWebStyle создал. Фигня, конечно, но мне нужно примерно такое меню сдела.
« Last Edit: May 20, 2006, 13:19:20 by Martin »

Offline stranger

  • Hero Member
  • *****
  • Posts: 922
  • Karma: +0/-0
    • http://
пара вопросов по web-мастерингу
« Reply #3 on: May 20, 2006, 15:27:40 »
Quote from: Martin
Спасибо!  
Не думал, что так быстро получу ответ в JS как делать разворачивающиеся меню (сверху вниз) хотябы примерно.
Вот заготовка сайта с кучей програмного кода. Я готовый через XaraWebStyle создал. Фигня, конечно, но мне нужно примерно такое меню сдела.
А просмотреть исходный код страниц приведенных тобою серверов не судьба?
Вкатце - делаешь лаер (см. в сторону div)в котором прописываешь подменю, который по умолчанию невидим и расположен по определенным координатам (в зависимасти от страницы, координаты могут задаваться жестко или вычисляться на ходу), а на элемент основного меню на OnMouseOver и OnMouseOut поля вешаешь код который показывает и прячет его...
[span style='font-family:Geneva'][span style='font-size:8pt;line-height:100%'][span style='color:gray']Единственное условие, от которого зависит успех, есть терпение.   Л.Н.Толстой
[/span][/span][/span]

Offline Martin

  • Newbie
  • *
  • Posts: 18
  • Karma: +0/-0
пара вопросов по web-мастерингу
« Reply #4 on: May 21, 2006, 19:32:39 »
 Расскажи пожалуйсто подробнее. Не могу разобраться. На странице ничего путнего нет, а в скриплах (*.js) как-то коряво все написано без отступа строки и непонятным шрифтом.
Копирни текст, плиз. Буду очень благодарен!

Offline stranger

  • Hero Member
  • *****
  • Posts: 922
  • Karma: +0/-0
    • http://
пара вопросов по web-мастерингу
« Reply #5 on: May 21, 2006, 23:09:00 »
Quote from: Martin
Расскажи пожалуйсто подробнее. Не могу разобраться. На странице ничего путнего нет, а в скриплах (*.js) как-то коряво все написано без отступа строки и непонятным шрифтом.
Копирни текст, плиз. Буду очень благодарен!
Странно у меня js файлы нормально отображаются...
Вобщем посмотрел я в томском адресе - написано там достаточно мощьно - новичку трудно разобраться...
Писать заново мне лень так, что привожу один из первых вариантов простеньких шаблонов, который делал для рассылки жены в Macromedia Dreamweaver несколько лет назад...
Code: [Select]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//RU"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Как получить Российское гражданство в Томске? Выпуск 1</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style type="text/css">
<!--
.hT {
    color: #0000FF;
    font-family: "Times New Roman", Times, serif;
    font-size: 14px;
    font-weight: bold;
}
.menu {
    background-color: #FFFFFF;
}
body {
    background-image: url(fon.jpg);
    margin-left: 5px;
    margin-top: 5px;
    margin-right: 5px;
    margin-bottom: 5px;
}
.head {
    font-size: 24px;
    font-weight: bold;
    color: #0000FF;
    font-family: Arial, Helvetica, sans-serif;
}
a:link, a:visited {
    font-family: "Times New Roman", Times, serif;
    font-size: 12px;
    color: #FF0000;
    text-decoration: none;
    cursor: hand;
}
a:hover {
    font-family: "Times New Roman", Times, serif;
    font-size: 12px;
    color: #FF0000;
    text-decoration: underline;
    cursor: hand;
}
p {
    font-family: "Times New Roman", Times, serif;
    font-size: 12px;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    color: #333399;
    text-align: left;
    white-space: normal;
    float: none;
    margin: 1px;
}
h1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: bold;
    font-variant: normal;
    color: #FF0099;
    text-decoration: none;
    text-align: center;
    margin-top: 2px;
    margin-bottom: 6px;
}
.mhead {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: bold;
    color: #0000FF;
    text-decoration: none;
}
.mtext {
    font-family: "Times New Roman", Times, serif;
    font-size: 12px;
    font-weight: normal;
    color: #000000;
    text-decoration: none;
}
.mtextb {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
}

-->
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_showHideLayers() { //v6.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
    obj.visibility=v; }
}
//-->
</script>
</head>

<body>
<!-- всплывающая таблица (начало)-->
<div id="listpvs" style="position:absolute; top:125px; width:386px; z-index:1; background-color: #FFFFFF; layer-background-color: #FFFFFF; border: 1px none #000000; visibility: hidden; left: 0;">
  <table width="100%"  cellspacing="1" cellpadding="1">
    <tr>

      <td bgcolor="#000000"><table width="100%"  cellspacing="1" cellpadding="1">
        <tr bgcolor="#FFFFFF">
          <td colspan="2"><div align="center" class="mhead">Адреса ПВС г. Томска </div></td>
          </tr>
        <tr bgcolor="#FFFFFF">
          <td class="mtextb"> Кировского РОВД </td>
          <td class="mtext"> Учебная 10 </td>

        </tr>
        <tr bgcolor="#FFFFFF">
          <td class="mtextb"> Советского РОВД </td>
          <td class="mtext"> Фрунзе 119 </td>
        </tr>
        <tr bgcolor="#FFFFFF">
          <td class="mtextb">Октябрьского РОВД </td>

          <td class="mtext"> И.Черных 38 </td>
        </tr>
        <tr bgcolor="#FFFFFF">
          <td class="mtextb">Ленинского РОВД </td>
          <td class="mtext"> Вокзальная 4 </td>
        </tr>

        <tr bgcolor="#FFFFFF">
          <td class="mtextb"> Томского РОВД </td>
          <td class="mtext"> Ленина 90 </td>
        </tr>
      </table></td>
    </tr>
  </table>

</div>
<!-- всплывающая таблица (конец)-->

<table width=701>
<tr>
<td>
<table width=700>
<tr>
    <td colspan="2"><p><span class="head">Как получить Российское гражданство в Томске?</span></p>
    </td>
  </tr>
<tr>
  <th width="577"><div align="left" class="hT">Выпуск 1 </div></th>

  <th width="111"><div align="right" class="hT">Дата </div></th>
</tr>
</table>
<hr width="100%" size="1" color="#00FF00" noshade>
<table width=700>
  <tr>
    <th width="575"><div align="left"> </div></th>
    <th width="113" ><div align="right"><span class="menu"><a href="#" name="layer" onClick="return false;" onMouseOver="MM_showHideLayers('listpvs','','show')" onMouseOut="MM_showHideLayers('listpvs','','hide')"> ПВС г. Томска</a></span></div></th>
  </tr>

</table>
<hr width="100%" size="1" color="#00FF00" noshade>
<table width=700>
  <tr>
    <td colspan="2" ><h1>тест заголовка</h1>
      <p>прошвапрвдимдвывды ывагпыадгшпыавпыгшв </p>
      <p>nkjhjhkjhkjhkhjkhk jghhjg hjg jhg jhg jhg hg hg hjghgjhghjghj hgjhghjghj hgjhghjg jhghjgjh jhghjguygygy ygygygyu uyiyuyuyu uyiuy uyuy uy uy u uy uiuy uiy yuiy uy uy uy uy uy uy uy y uyiuy u y </p></td>
  </tr>
    <tr>

    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>

    <td></td>
  </tr>
<tr>
    <td></td>
    <td></td>
  </tr>
</table>
</td>
</tr>
</table>
</body>
</html>

Тут внимательней смотри функцию MM_showHideLayers() - она отвечает за скрытие и показываения лаера... Лаер определен в начале страницы... Размер и положение там заданы жестко, но чаще всего в меню его вычисляют динамически и подставляют через функции js...
Функции я сам не писал - они просто взяты из библиотеки дримвейвера...
Для начала я думаю хватит... Потом можно усложнять
« Last Edit: May 21, 2006, 23:12:28 by stranger »
[span style='font-family:Geneva'][span style='font-size:8pt;line-height:100%'][span style='color:gray']Единственное условие, от которого зависит успех, есть терпение.   Л.Н.Толстой
[/span][/span][/span]

Offline Martin

  • Newbie
  • *
  • Posts: 18
  • Karma: +0/-0
пара вопросов по web-мастерингу
« Reply #6 on: May 22, 2006, 08:40:10 »
Спасибо большо!   Я очень рад! Щас разбираться буду.
Ещё раз спасибо!  

Offline stranger

  • Hero Member
  • *****
  • Posts: 922
  • Karma: +0/-0
    • http://
пара вопросов по web-мастерингу
« Reply #7 on: May 22, 2006, 11:04:14 »
Кстати, выпадающее меню можно сделать и без js используя только css...
См, например, http://nix.ru/price/price.html
В кратце создаем, например, такие стили (взято с приведенного адреса)
Code: [Select]
#container {width: 100%;float: left;margin-right: -205px;margin-top:5px;}
#nav, #nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid #5a77a1;
  border-bottom: 1px solid #5a77a1;
  background: #F2F7FE;
  float: left;
  width: 100%;
}
#nav li {
  float: left;
  position: relative;
  background: #F2F7FE;
  back\ground: none;
}

#nav a {
  color: #5a77a1;
  font-weight: bold;
  text-decoration: none;
  display: block;
  width: 100px;
  padding: 4px 10px;
  background: url(/art/dot.png) repeat-y right;
}
#nav a:hover {
  color: #000;
  background: #ccc;
}
#nav li:hover,
#nav li.jshover {
  background: #F2F7FE;
}

#nav li ul {
  display: none;
  position: absolute;
  background: url(/art/tr.png);
  padding: 8px 0;
  width: 138px;
}
#nav li li a {
  width: 118px;
  background: none;
}
#nav li:hover ul,
#nav li.jshover ul {
  display: block;
}

#nav li:hover li ul,
#nav li.jshover li ul {
  display: none;
  width: 138px;
  top: -9px;
  left: 118px;
  lef\t: 133px;
}
#nav li:hover li:hover ul,
#nav li.jshover li.jshover ul {
  display: block;
}
И прописываем на странице, например, следующее
Code: [Select]
<table width='100%'>
<tr><td>
<div id='container'>
<ul id='nav'>
<li><a href='/'>Главная</a>
    <ul>
    <li><a href='/about.html'>О фирме</a></li>

    <li><a href='/links.html'>Контакты</a></li>
    </ul>
</li>
<li><a href='/documents/how_to_buy_right.html'>Как купить?</a>
    <ul>
    <li><a href='/dealers/howtofindus.html'>Где купить?</a></li>
    <li><a href='/autocatalog/news/news.html'>Новинки</a></li>
    </ul>

</li>
<li><a href='/price/price.html'>Прайс-лист</a>
    <ul>
    <li><a href='/price/virtualshop.html'>общий</a></li>
    <li><a href='/include/get_price.php?file=Nix3.ZIP'>общий в ZIP-архиве</a></li>
    <li><a href='/price/nix276.html'>на компьютеры</a></li>
    <li><a href='ftp://ftp2.nix.ru/download/price/NixSH.ZIP'>уцененный товар</a></li>

    <li><a href='ftp://ftp2.nix.ru/download/price/COMP_SH.ZIP'>компьютеры б.у.</a></li>
    </ul>
</li>
<li><a href='/home_delivery.html'>Доставка</a>
    <ul>
    <li><a href='/home_delivery.html'>по Москве</a></li>
    <li><a href='/region_delivery.html'>по России</a></li>
    </ul>

</li>
<li><a href='/autocatalog/cc/main.html'>Каталог</a>
    <ul>
        <li><a href='/documents/dealers_check.php'>Обновления</a></li>
        <li><a href='/rights.html'>Правила использования</a></li>
    </ul>
</li>
<li><a href='/support/'>Техподдержка</a></li>
</div></td></tr></table>
Тут то же будет выпадающее сверху меню... Положение на странице я не менял, так что в оторваном виде может отображаться некорректно...
[span style='font-family:Geneva'][span style='font-size:8pt;line-height:100%'][span style='color:gray']Единственное условие, от которого зависит успех, есть терпение.   Л.Н.Толстой
[/span][/span][/span]