6.2 Дублирующее меню сайта

Оговорюсь сразу - СОЗДАВАТЬ ДУБЛИРУЮЩЕЕ МЕНЮ НЕ ОБЯЗАТЕЛЬНО.

Создавая дублирующее меню, я преследовал две цели:

1. Предвидя ситуацию, когда "слетает основное меню" - у меня на Юкозе это БЫЛО. Крайне неприятная ситуация, когда от какого-то до сих пор мне неизвестного глюка, меню в левом верхнем углу просто взяло и бесследно исчезло.

2. Цель учебная - учимся работать с кодами шаблонов, используя готовые, созданные до нас блоки.

На Рис. 6.2.1. (слева) - то "техническое задание", которое надо бы получить в правом контейнере внизу, где ВЫ полностью его видите и сейчас

Рис. 6.2.1.

Далее (смотрим на Рис. 6.2.2.) - ПАНЕЛЬ УПРАВЛЕНИЯ, УПРАВЛЕНИЕ ДИЗАЙНОМ (1 или 2)-ГЛОБАЛЬНЫЕ БЛОКИ (4). Ищем контейнер - их может быть 1-2, в зависимости от дизайна. У нас это ПЕРВЫЙ КОНТЕЙНЕР (5).

Как видно из Рис. 6.2.2. - каждый элемент контейнера описан отдельным блоком (6, 7, 8...). При этом сразу после имени-номера блока слева и справа от его заглавия - код дизайна этого блока - те теги, которые и дадут нам после сохранения "серенький" фон заголовка, центровку шрифта, его цвет и размер. Не забудем это при создании своего блока дублирующего меню, как и "закрывающих" тегов в конце создаваемого блока.

Рис. 6.2.2.

При формировании меню я просто скопировал один из блоков, скажем, первый, о переобозвал его очередным порядковым номером - у меня (см. Рис. 6.2.3.) он получился блоком 12 (1) . Теперь задача - сменить непосредственно "начинку" меню. На рисунке под поз.2 показано заглавие - "шапка", а поз.3 - это непосредственно строки - страницы нашего меню.

Вопрос - где я их взял, когда мое меню "слетело"?? Признаюсь - для этого использовал код меню из другого моего сайта. Скопировал его в БЛОКНОТ, произвел правки - и вставил в нужное место между "открывающими" и "закрывающими" тегами моего нового блока.

Рис. 6.2.3.

Для примера приведу полностью код меню НАШЕГО сайта на сегодня, 22.09.2010, прямо из текстового файла блокнота:

* * *


<table class="boxTable" border="0" cellpadding="0" cellspacing="0">
<tbody><tr>
<td class="boxTitle"><b>Дублирующее меню сайта<br> это ЗАГЛАВИЕ
<span style="font-size: 12pt; color: rgb(128, 0, 0);"><b>ЧАЙНИК - учебный сайт начинающих ВЕБ-строителей<br> это ссылка на ИМЯ САЙТА
<span style="font-size: 11pt; color: rgb(128, 0, 0);">на
<tr><td class="boxContent">
<li><a href="http://www.ucoz.ru/" target="_blank"></a><b>03:37 19.04.2024</b> текущее время, текущая дата - смотри БЛОК 2 Рис. 6.2.3
<br><ul class="uz"><br>
<li class="m"><a class="m" href="http://4ajnik.at.ua/">* Ну, начнем...</a> страницы меню, при этом закрывающий тег </li> для удобства прочтения - на новой строке
</li><li class="m"><a class="m" href="http://4ajnik.at.ua/index/0-2"> * Немного о сайте</a>
</li><li class="m"><a class="m" href="http://4ajnik.at.ua/index/2_ehtap_registracija/0-4"> * 2 этап - Регистрация</a>
</li><li class="m"><a class="m" href="http://4ajnik.at.ua/index/3_ehtap_konfiguracija_sajta/0-5">* 3 этап - Конфигурация сайта</a>
</li><li class="m"><a class="m" href="http://4ajnik.at.ua/index/ehtap_chetvertyj_u_nas_uzhe_est_sajt/0-6"> * 4 этап - У нас уже есть сайт</a>
</li><li class="m"><a class="m" href="http://4ajnik.at.ua/index/5_ehtap_probuem_vstavljat_kartinki/0-8"> * 5 этап - Пробуем вставлять картинки</a>
</li><li class="m"><a class="m" href="http://4ajnik.at.ua/index/akh_ehtot_html/0-9"> * Ах, этот html...</a>
</li><li class="m"><a class="m" href="http://4ajnik.at.ua/index/o_tegakh/0-11/"> * О тегах</a>
</li><li class="m"><a class="m" href="http://4ajnik.at.ua/index/vidy_tegov/0-12/"> * Виды тегов</a>
</li><LI class="m"><A class="m" href="http://4ajnik.at.ua/index/khochu_migajushhij_banner/0-17"> * Хочу мигающий баннер</A>
</li><LI class="m"><A class="m" href="http://4ajnik.at.ua/index/chtoby_banner_zamigal/0-19"> * Чтобы баннер замигал</A>
</li><LI class="m"><A class="m" href="http://4ajnik.at.ua/index/primer_krasivoj_nadpisi_dlja_bannera/0-18/"> * Пример красивой надписи</A>
</li><LI class="m"><A class="m" href="http://4ajnik.at.ua/index/banner_poka_ne_migaet/0-20/"> * Пока не мигает?</A>
</li><LI class="m"><A class="m" href="http://4ajnik.at.ua/index/i_budet_nam_schaste/0-21"> * И будет нам счастье -<br>КОНЕЦ УРОКА</A>
</li><li class="m"><a class="m" href="http://4ajnik.at.ua/index/menjaem_dizajn_sajta/0-23"> * 9.1 Меняем дизайн сайта</a>
</li><li class="m"><a class="m" href="http://4ajnik.at.ua/index/9_2_menjaem_dizajn_s_pomoshhju_konstruktora/0-24"> * 9.2 Меняем дизайн с помощью конструктора</a>
</li><li class="m"><a class="m" href="http://4ajnik.at.ua/index/9_3_kak_smenit_shablon_jukoz_na_svoj_sobstvennyj/0-25"> * 9.3 Как сменить шаблон Юкоз на свой собственный</a>
</li><li class="m"><a class="m" href="http://4ajnik.at.ua/index/9_4_primery_kartinok_v_sss/0-26"> * 9.4 Примеры картинок в СSS</a>
</li><li class="m"><a class="m" href="http://4ajnik.at.ua/load/"> * Полезные ссылки</a>
</li><li class="m"><a class="m" href="http://4ajnik.at.ua/"> * Статьи и книги</a>
</li><li class="m"><a class="m" href="http://4ajnik.at.ua/blog/"> * Дневник</a>
</li><li class="m"><a class="m" href="http://4ajnik.at.ua/forum/"> * Форум</a>
</li><li class="m"><a class="m" href="http://4ajnik.at.ua/photo/"> * Всяко-разны фотки</a>
</li><li class="m"><a class="m" href="http://4ajnik.at.ua/gb/"> * Гостевая книга</a>
</li><li class="m"><a class="m" href="http://4ajnik.at.ua/index/0-3"> * На базу!!Или связь со мной</a>
</li></ul></td></tr></tbody></table>

* * *

Думаю, понятно: написанное зеленым - это КОД, а красным - вставки-пояснения, к коду отношения не имеющие.

Редактор в панели управления устроен так, что если что-то неправильно - выделяется красным, значит, ищите ошибку.
Если все верно - цвета нейтральные (зеленый, синий, фиолетовый), при этом каждый отдельный тег каждой строчки - если все без ошибок - будет ОДИНАКОВОГО ЦВЕТА - весьма наглядно на Рис. 6.2.3.

Форма входа

Поиск

Календарь

Друзья сайта

Официальный блог

Усик Игорь приглашает к общению

Первый 31 или КВВИУС форева

Сообщество uCoz

FAQ по системе

Инструкции для uCoz

Статистика

Онлайн всего: 1

Гостей: 1

Пользователей: 0

Дублирующее меню сайта
ЧАЙНИК - учебный сайт начинающих ВЕБ-строителей
на 03:37 19.04.2024