Ссылки. Меню сайта.



Календарь


Trustlink_200x200

Чат с админом сайта



Нажмите Edit Nickname и впишите свое имя или Ник. Выше наберите свое сообщение. Enter - отправка. Админ получит послание и в OffLine.

free counters

Урок 2. Ссылки. Меню сайта.

lesson 2 В первых уроках мы познакомились со структурой веб-страницы и научились делать разметку странички. Но как вы заметили оформление нашей странички пока никуда не годится. Давайте будем исправлять такое положение вещей.

Немного теории. у тегов <TR> и <TD> есть атрибуты для горизонтального и вертикального выравнивания элементов в таблице.

Для горизонтального выравнивания служит атрибут align="...". Он может принимать значения:
left - прижать влево;
right - прижать вправо;
center - разместить по центру.

Для вертикального выравнивания служит атрибут valign="...". Он может принимать значения:
top - прижать вверх;
bottom - прижать вниз;
middle - разместить по центру.

Эти элементы используются довольно часто. Читая дальше вы увидите как применяются эти атрибуты в других тегах.

А сейчас мы узнаем как сделать меню сайта или его еще можно назвать блоком навигации по сайту. Это неотъемлемая часть каждой веб-странички. Как вы помните мы отвели для него свое место - это левая колонка раздела Нашей информации.

Навигация по сайту осуществляется гиперссылками или как их еще называют якорными тегами. Различают абсолютные и относительные ссылки. Например нам нужно написать меню для перемещения по урокам создания сайта. Уроки лежат в папке lessonshtml, которая находится в корневой директории сайта buckses.info. Пишем ссылку на вводный урок, который называется "С чего начинать создание веб-страницы?":

<a href="http://buckses.info/lessonshtml/index.html" target="_blank">С чего начинать создание веб-страницы?</a>

Это абсолютная ссылка. Слова, находящиеся перед закрывающим тегом </a>,
а именно - С чего начинать создание веб-страницы? - называются маршрутизатором ссылки. Благодаря значению _blank атрибутa target урок откроется в новом окне.
http:// - это название протокола, которым будет передаваться информация;
buckses.info - название домена, или сайта, к которому мы обращаемся;
buckses.info/lessonshtml/ - после названия домена идет имя папки, в которой лежат файлы уроков;
index.html - файл с таким именем загружается в броузер автоматически, в данном случае мы поместили туда вводный урок "С чего начинать создание веб-страницы?".

Сделаем ссылку на следующий урок. Пусть она будет относительной:
<a href="lesson1tables.htm">Урок 1. Таблицы </a>
Файл должен находиться в текущей папке, иначе ссылка не сработает. И так далее, до последнего урока. Если мы создали еще какой-либо урок и нужно его добавить - помещаем этот урок в папку lessonshtml и дописываем на него ссылку в меню.

Все просто. А чтоб меньше путаться - старайтесь пока не использовать относительных ссылок, а лучше сразу усвойте себе раз и навсегда. Взгляните еще раз - это абсолютная ссылка:
<a href="http://buckses.info/lessonshtml/index.html" target="_blank">С чего начинать создание веб-страницы?</a>
А это относительная ссылка:
<a href="lesson1tables.htm">Урок 1. Таблицы </a> - она будет работать если мы находимся в текущем каталоге ( текущей папке), в данном конкретном случае это папка lessonshtml

Подводим итог. Мы создали простейшее меню сайта. Отделяем каждую ссылку горизонтальной линией для наглядности - тег <hr> (он непарный) и делаем выравнивание по вертикали и по горизонтали. Сначала по вертикали. Возможно вы уже догадались, что для этого нужно прижать меню вверх, чтоб не болталось посредине колонки. Добавляем в тег <td> атрибут valign="top". Обозначаем меню сайта как блок с помощью блочного элемента <div></div>, и для горизонтального выравнивания вставляем в него атрибут align="left" или align="center" - кому что подходит. Преимущество такого простого меню в том, что оно работает и в том случае, если в броузере пользователя картинки отключены или не грузятся.

Фрагмент html с нашим меню должен выглядеть примерно так:

<td width="20%" valign="top"><!-- Начало левой колонки (меню)-->
<div align="center">
<a href="http://buckses.info/lessonshtml/index.html" target="_blank">
С чего начинать создание веб-страницы?</a><hr>
<a href="lesson1tables.htm">Урок 1. Таблицы </a><hr>
<!-- Здесь находятся ссылки на другие уроки -->
<a href="lastlesson.htm">Заключительный урок</a><hr>
</div>
<!-- Здесь находится все что вам вздумается (календарь, чат и т.д. -->
</td><!-- Конец левой колонки -->

Помните мы говорили во вступительном уроке о разбивке задачи на части? Там мы приняли решение начать с самой простой веб-странички. В этом уроке мы научились создавать меню сайта. А это уже реальный инструмент, который объединит наши веб-странички в единое целое - сайт. Дальше наша задача упрощается тем, что все странички сайта должны быть одинаковые. Иначе пользователь может подумать, что при переходе по ссылке попал на другой сайт, а нам этого не нужно. Фактически мы уже создали шаблон простенькой веб-странички. Все по шаблону, отличаться будет только раздел Наша информация. Об этом разделе разговор особый, от его заполнения очень многое зависит, но об этом потом. Сначала научимся форматировать тексты и работать с картинками. Об этом наш следующий урок.

А пока попробуйте самостоятельно вставить наше меню сайта в страничку, которую мы получили в предыдущем уроке. Смело экспериментируйте с тегами и атрибутами, которые вы уже изучили, так вы сможете узнать больше и закрепить ваши знания.


Автор: Косов Сергей
03.01.2011


Все права защищены © 2010-2011   Сергей Косов     kosowlv@gmail.com    www.buckses.info