Закладки.
Закладки или якоря - это особый вид ссылок. Данные ссылки, как правило, не ведут к какому либо документу, а предназначены для навигации внутри страницы.
Предположим на странице в удобном месте находится некое содержание или меню.. по принципу:
Глава1
Глава2
Глава3
А далее идет большой текст с этими главами, так вот чтобы посетитель страницы нажав на одну из этих глав "перенёсся" в нужное место текста нам нужно сделать две вещи:
Присвоить индивидуальное имя каждой главе. Ищем, значит, в большом-большом тексте нужные главы и делаем их адресами ссылок закладок, присваиваем им имена.
Вот так:
<а name="glava1">Глава1 </а>
<а name="glava2">Глава2 </а>
<а name="glava3">Глава3 </а>
Имя можно присвоить любое необязательно glava1
А теперь собственно прописываем на них ссылки в нашем меню, содержании.
Вот так:
<a href="#glava1"> Глава1</a>
<a href="#glava2"> Глава3</a>
<a href="#glava3"> Глава3</a>
Замете перед каждым именем ставим знак решётки #.
Ладно, думаю, на примере будет понятнее:
<html>
<head>
<title>Закладки</title>
</head>
<body>
<h2>А. С. ПУШКИН</h2>
<a href="#skazka1">Сказка о попе и работнике его Балде</a><br>
<a href="#skazka2">Сказка о рыбаке и рыбке</a><br>
<a href="#skazka3">Сказка о царе Cалтане</a>
<h3><a name="skazka1">Сказка о попе и работнике его Балде</a></h3>
<pre>
Жил-был поп,
Толоконный лоб.
... ... ...
</pre>
<h3><a name="skazka2">Сказка о рыбаке и рыбке</a></h3>
<pre>
Жил старик со своею старухой
У самого синего моря.
... ... ...
</pre>
<h3><a name="skazka3">Сказка о царе Cалтане</a></h3>
<pre>
Три девицы под окном
Пряли поздно вечерком.
... ... ...
</pre>
</body>
</html>
Хотя, как я уже говорил, закладки используют для навигации внутри страницы, на них всё же можно ссылаться с других страниц или сайтов
<a href="primer.html#glava1"> идем к главе1 с другой страницы сайта</a>
<a href="http://www.site.ru/ primer.html#glava2"> разместив такую ссылку на любом другом сайте мы согласно указанному пути сначала попадаем на наш сайт www.site.ru надём там документ primer.html и сразу начинам читать главу2</a>
Ну а теперь, как и обещал, выкладываю "большой" пример он тоже состоит из двух отдельных страниц:
Файл index.html:
<html>
<head>
<title>Мой первый сайт</title>
</head>
<body text="#484800" bgcolor="#ffffff" background="graphics/fon.jpg">
<center>
<table width="640" height="480" cellpadding="5" cellspacing="2" border="1">
<tr>
<td colspan="3" height="30" bgcolor="#b2ff80">
<center><img src="graphics/privet.png" width="200" height="40" alt="Привет мир!!!"></center>
</td>
</tr>
<tr>
<td height="30" width="33%" bgcolor="#ffa0cf">
<center><b><a href=" index.html">Обо мне!!!</a></b></center>
</td>
<td width="33%" bgcolor="#c0e4ff">
<center><b><a href=" myfoto.html">Здесь мои фотки!!</a></b></center>
</td>
<td bgcolor="#c0e4ff">
<center><b><a href="mailto:karlson@kruha.ru">Напишите мне письмо..</a></b></center>
</td>
</tr>
<tr>
<td colspan="3" valign="top" bgcolor="#b2ff80">
<img src="graphics/foto.jpg" align="left" hspace="10" width="100" height="90" alt="Это моя фотка!!!">
<p align="justify"> Разрешите представиться Карлсон! … … …</p>
</td>
</tr>
</table>
</center>
</body>
</html>
Файл myfoto.html:
<html>
<head>
<title>Мой первый сайт</title>
</head>
<body text="#484800" bgcolor="#ffffff" background="graphics/fon.jpg">
<center>
<table width="640" height="480" cellpadding="5" cellspacing="2" border="1">
<tr>
<td colspan="3" height="30" bgcolor="#b2ff80">
<center><img src="graphics/privet.png" width="200" height="40" alt="Привет мир!!!"></center>
</td>
</tr>
<tr>
<td height="30" width="33%" bgcolor="#c0e4ff">
<center><b><a href=" index.html">Обо мне!!!</a></b></center>
</td>
<td width="33%" bgcolor="#ffa0cf">
<center><b><a href=" myfoto.html">Здесь мои фотки!!</a></b></center>
</td>
<td bgcolor="#c0e4ff">
<center><b><a href="mailto:karlson@kruha.ru">Напишите мне письмо..</a></b></center>
</td>
</tr>
<tr>
<td colspan="3" valign="top" bgcolor="#b2ff80">
<img src="graphics/foto1.jpg" align="middle" vspace="10" hspace="10" width="140" height="120" alt="Это моя фотка!!!">
это я <br>
<img src="graphics/foto2.jpg" align="middle" vspace="10" hspace="10" width="140" height="120" alt="Это моя фотка!!!">
и это я <br>
<img src="graphics/foto3.jpg" align="middle" vspace="10" hspace="10" width="140" height="120" alt="Это моя фотка!!!">
снова я
</td>
</tr>
</table>
</center>
</body>
</html>
Фух.. ну вроде всё.. Думаю, на этом примере с Карлсоном мы распрощаемся, разросся он через чур.. да и как сайт с точки зрения построения имеет законченный вид...
Он улетел - но обещал вернуться!.. :)
Вполне нормальный сайт-визитка получился.. конечно, дизайн не вдохновляет, но зато теперь у Вас будет стимул сделать лучше!! Теперь этот сайт можно выложить в свет, как это сделать читайте в статье Публикация сайта: (http://www.webremeslo.ru/publication/publication2.html)
Ну а мы пойдем дальше, впереди нас ждет еще много интересных всяких разных штук.
Полезные советы:
· Одна из Ваших страничек на сайте обязательно должна называться index.html. Именно файл с таким названием на Вашем сайте будет искать программа робот, когда человек введет имя Вашего сайта. Так как страница index.html будет открываться первой, делайте её главной. Остальные страницы можете называть, как угодно… больше никаких нюансов с именами нет.
· Про регистр.. Прописывая путь и имена документов помните, что, к примеру: Page.html, page.html и PAGE.html это имена разных документов! Это же касается имен закладок и рисунков. Всегда учитывайте регистр при написании кода, есть большая вероятность, что такие имена не будут распознаны тем или иным браузером. Возьмите за правило все писать и обзывать маленькими латинскими буквами, тогда риск человеческого фактора и капризов программ сведется к нулю.
· Правило трех кликов..
Старайтесь формировать "дерево ссылок" таким образом, чтобы посетитель сайта мог из любой его страницы попасть в любое место сайта за минимальное число переходов по ссылкам. Больше трёх переходов к нужному месту на сайте это уже не есть хорошо.. Бесконечные загрузки ненужных человеку страниц могут привести к нервному расстройству и преждевременному закрытию сайта. Берегите время деньги и нервы людей.
Глава 6
И ещё…
Прежде чем перейти к изучению очередной большой главы, расскажу немного о некоторых мелочах, которые как-то выпали из общего строя, но порой без них никак не обойтись. Эти, фигурально выражаясь, элементы html языка помогут решить ряд задач с которыми частенько приходится сталкиваться при создании той или иной странички, так что не стоит относится к ним с пренебрежением.
Дата добавления: 2015-04-19; просмотров: 847;