Модераторы: Illuminaty
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Меню слева, справа и вверху, а посередине текст. Как это сделать без фреймов????? 
:(
    Опции темы
Nicholas
  Дата 23.6.2008, 09:14 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 436
Регистрация: 30.9.2004

Репутация: нет
Всего: 0



Как написано в названии темы надо сделать "Меню слева, справа и вверху, а посередине текст".

Есть 3 условия:

1. Меню должно быть на всех страницах сайта, естественно вписывать один и тотже код на каждой странице я не хочу. smile
2. Вся полезная информация будет распологаться посередине. Надо чтобы при прокрутке информации все менюшки (лево, право, верх) оставались на месте.
3. Не использовать фреймы и div.

Очень прошу подскажите как такое сделать без фреймов???  smile 


PM MAIL ICQ   Вверх
Nicholas
  Дата 24.6.2008, 07:38 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 436
Регистрация: 30.9.2004

Репутация: нет
Всего: 0



Выяснилось что нужные мне манипуляции можно проделать с помощью SSI - Server Side Includes.

Цитата

Делаем сайт с помощью SSI    Создание сайтов    
    Есть такая фишка: SSI - Server Side Includes, иными словами - включения на стороне сервера. Когда Вы запрашиваете страницу, ну скажем index.shtml (файлы где есть SSI имеют расширение.shtml), то браузер, встретив в документе строку вида:

#include virtual="top.shtml" -->

"понимает" что в это место необходимо вставить содержимое файла top.shtml.

Как это использовать?

Предположим, что у Вас есть сайт. Все элементы этого сайта можно поделить на:

1. Заголовок, который состоит, скажем из логотипа и баннера, и который на всех страницах сайта одинаковый.

2. Панель навигации.. тоже неизменная, но показывается не на всех страницах сайта.

3. Окно, в котором выводится информация котоую запросил посетитель.

4. И еще панелька снизу, ну скажем тоже с баннером.

Все 4 пункта пишем отдельно в разных файлах.

1. top.shtml
2. nav.shtml
3.
4. bottom.shtml

3 пункт я пропустил специально... в этом окне может отображаться разное содержимое. Предположим у нас есть раздел "новости" и "цены на услуги".

Дальше пишем отдельно два файла news.shtml и price.shtml.

Теперь пример:

предположим посетитель решил перейти на страницу новостей... и кликает на ссылке. Ссылка направляет его на файл news_ssi.shtml
Вот как выглядит такой файл.

#include virtual="top.shtml" -->
#include virtual="nav.shtml" -->
#include virtual="news.shtml" -->
#include virtual="bottom.shtml" -->

И все!!! Сервер сам компанует html файл из файлов которые ему указали. Причем все файлы написаны на простом html, но только файл top.shtml содержит открывающие теги , а файл bottom.shtml содержит в конце теги .

А скажем в файле nav.shtml таких тегов нет... они там не нужны, потому что содержимое этого файла оказывается внутри уже готового html документа.

Надеюсь понятно.

Но это только один пример. Способов использования SSI много... Приемущества налицо. Захотел изменить навигацию... меняешь файл nav.shtml и навигация изменяется на всем сайте сразу.

Автор статьи: Silver
Email: [email protected]


Исходя из этого сделал следующие файлы.

top.shtml 
Код

<!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">
<body>
<table width="100%" border="5" bordercolor="#0000FF">
  <tr>
    <td>Это </td>
    <td>заголовк </td>
    <td>сайта</td>
  </tr>
</table>


nav.shtml
Код

<table width="20%" border="5" bordercolor="#0000FF">
  <tr>
    <td>Пункт меню 1 </td>
  </tr>
  <tr>
    <td>Пункт меню 2 </td>
  </tr>
  <tr>
    <td>Пункт меню 3 </td>
  </tr>
  <tr>
    <td>Пункт меню 4 </td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>


news.shtml
Код

<table width="100%" border="5" bordercolor="#0000FF">
  <tr>
    <td>Это новости!! Меню должно быть слева от них!!! </td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td bordercolor="#0000FF">Это новости!! тоже!!!  </td>
    <td>&nbsp;</td>
  </tr>
</table


bottom.shtml
Код

<table width="100%" border="5" bordercolor="#0000FF">
  <tr>
    <td>А Это подпись и все такое. :) Все права защищены! </td>
  </tr>
</table>
</body>
</html>


И все это запускается файлом

news_ssi.shtml 
Код

<!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>
</head>

<body>

#include virtual="top.shtml" -->
#include virtual="nav.shtml" -->
#include virtual="news.shtml" -->
#include virtual="bottom.shtml" -->

</body>
</html>


Я использую таблицы, в итоге должно получиться так:

Код

<!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">


<body>
<table width="100%" border="5" bordercolor="#0000FF">
  <tr>
    <td>Это </td>
    <td>заголовк </td>
    <td>сайта</td>
  </tr>
</table>


<table width="100%" border="5" bordercolor="#0000FF">
  <tr>
    <td valign="top"><table width="98%" border="5" bordercolor="#0000FF">
      <tr>
        <td valign="top">Пункт меню 1 </td>
      </tr>
      <tr>
        <td valign="top">Пункт меню 2 </td>
      </tr>
      <tr>
        <td valign="top">Пункт меню 3 </td>
      </tr>
      <tr>
        <td valign="top">Пункт меню 4 </td>
      </tr>
      <tr>
        <td valign="top">&nbsp;</td>
      </tr>
      <tr>
        <td valign="top">&nbsp;</td>
      </tr>
      <tr>
        <td valign="top">&nbsp;</td>
      </tr>
      <tr>
        <td valign="top">&nbsp;</td>
      </tr>
      <tr>
        <td valign="top">&nbsp;</td>
      </tr>
      <tr>
        <td valign="top">&nbsp;</td>
      </tr>
    </table></td>
    <td>Это новости!! Меню должно быть слева от них!!! </td>
  </tr>
  <tr>
    <td bordercolor="#0000FF">&nbsp;</td>
    <td>Это новости!! тоже!!! </td>
  </tr>
</table>


<table width="100%" border="5" bordercolor="#0000FF">
  <tr>
    <td>А Это подпись и все такое. :) Все права защищены! </td>
  </tr>
</table>
</body>
</html>



Думаю это исчерпывающая информация дл того чтобы ктонибудь смог мне помочь! ;)
Сейчас проблема в том, что  блоки "Новости" и "Меню" не находятся на одном уровне горизонтально, а следуют друг за другом! Как это исправить!??

PM MAIL ICQ   Вверх
NDenis
Дата 24.6.2008, 09:16 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 317
Регистрация: 14.12.2007

Репутация: 8
Всего: 8



Цитата(Nicholas @  24.6.2008,  07:38 Найти цитируемый пост)
Сейчас проблема в том, что  блоки "Новости" и "Меню" не находятся на одном уровне горизонтально, а следуют друг за другом! Как это исправить!??

Если вы имеете ввиду то, что две строчки новости находятся в разных ячейках, то вы же сами так сделали.
Исправить можно добавлением таблицы в правую колонку для новостей.
Код

<table width="100%" border="5" bordercolor="#0000FF">
  <tr>
    <td valign="top"><table width="98%" border="5" bordercolor="#0000FF">
      <tr>
        <td valign="top">Пункт меню 1 </td>
      </tr>
      <tr>
        <td valign="top">Пункт меню 2 </td>
      </tr>
      <tr>
        <td valign="top">Пункт меню 3 </td>
      </tr>
      <tr>
        <td valign="top">Пункт меню 4 </td>
      </tr>
      <tr>
        <td valign="top">&nbsp;</td>
      </tr>
      <tr>
        <td valign="top">&nbsp;</td>
      </tr>
      <tr>
        <td valign="top">&nbsp;</td>
      </tr>
      <tr>
        <td valign="top">&nbsp;</td>
      </tr>
      <tr>
        <td valign="top">&nbsp;</td>
      </tr>
      <tr>
        <td valign="top">&nbsp;</td>
      </tr>
    </table></td>
    <td valign="top">
        <table width="98%" border="5" bordercolor="#0000FF">
          <tr>
             <td>Новость номер один</td>
          </tr>
          <tr>
             <td>Новость номер два</td>
          </tr>
          <tr>
             <td>И т.д. все новости</td>
          </tr>
        </table>
     </td>
  </tr>
</table>

или используйте блоки

Это сообщение отредактировал(а) NDenis - 24.6.2008, 09:17
PM MAIL   Вверх
Nicholas
Дата 24.6.2008, 10:21 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 436
Регистрация: 30.9.2004

Репутация: нет
Всего: 0



Цитата(NDenis @ 24.6.2008,  09:16)
Если вы имеете ввиду то, что две строчки новости находятся в разных ячейках, то вы же сами так сделали.
Исправить можно добавлением таблицы в правую колонку для новостей.


Нет. Имел ввиду другое. Но уже исправил...


PM MAIL ICQ   Вверх
NDenis
Дата 24.6.2008, 10:39 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 317
Регистрация: 14.12.2007

Репутация: 8
Всего: 8



Nicholas, тогда бы указали как надо было.
Если справились, поздравляю. smile 
PM MAIL   Вверх
Nicholas
  Дата 30.6.2008, 07:38 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 436
Регистрация: 30.9.2004

Репутация: нет
Всего: 0



Цитата(NDenis @ 24.6.2008,  10:39)
Nicholas, тогда бы указали как надо было.
Если справились, поздравляю. smile

Просто упустил из виду вот это:

Цитата

 Причем все файлы написаны на простом html, но только файл top.shtml содержит открывающие теги , а файл bottom.shtml содержит в конце теги .


и в одном из вставляемых файлов были теги </body> и </html>


PM MAIL ICQ   Вверх
  
Ответ в темуСоздание новой темы Создание опроса
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | Вёрстка веб-сайтов | Следующая тема »


 




[ Время генерации скрипта: 0.0443 ]   [ Использовано запросов: 21 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.