Веб-инструмент
Веб-мастерская
Итак мы создали Главную страницу сайта. Для того, чтобы оживить сайт необходимо установить связь между страницами. Эту задачу мы решим с помощью меню.
Приступаем к созданию меню. Пока наш сайт будет 3-х страничный: Главная страница, Услуги и страница Ссылок.
Пусть пункты меню сайта и называются соответственно: Главная, Услуги и Ссылки.
Для создания меню воспользуемся таблицей.
<table width="200">
<tr>
<td bgcolor="#0000FF"><span style="color:#FFFFFF; font-weight: bold">Меню</span></td>
</tr>
<tr>
<td style="font-size:16px; font-family:sans-serif; color:#770000; font-weight: 500">Главная</td>
</tr>
<tr>
<td style="font-size:16px; font-family:sans-serif; color:#770000; font-weight: 500">Услуги</td>
</tr>
<tr>
<td style="font-size:16px; font-family:sans-serif; color:#770000; font-weight: 500">Ссылки</td>
</tr>
</table>
В данном случае для форматирования текста меню сайта применена таблица стилей CSS. Более подробно об этом изложено в разделе Основы CSS.
Вставим созданную таблицу в HTML-код нашей страницы.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Компания АВС</title>
</head>
<body>
<center>
<table border="0" width="1000" height="600">
<tr>
<td colspan="2" bgcolor="#00CC99" width="1000" height="100"><img src="images/abc_top.gif" width="1000" height="100"></td>
</tr>
<tr>
<td bgcolor="#CCCCCC" height="500" width="200" background="images/abc1.gif" valign="top" align="left">
<table width="200">
<tr>
<td bgcolor="#0000FF"><span style="color:#FFFFFF; font-weight:bold">Меню</span></td>
</tr>
<tr>
<td style="font-size:16px; font-family:sans-serif; color:#770000; font-weight:500">Главная</td>
</tr>
<tr>
<td style="font-size:16px; font-family:sans-serif; color:#770000; font-weight:500">Услуги</td>
</tr>
<tr>
<td style="font-size:16px; font-family:sans-serif; color:#770000; font-weight:500">Ссылки</td>
</tr>
</table>
</td>
<td width="800" valign="top" align="left">
<h1 align="center" style="color:#FF0000">Компания АВС</h1>
<h2 align="center" style="color:#0000FF">О компании</h2>
<p style="font-size:large; color:#0000FF"><a href="abc_serv.html"><img src="images/abc.gif" border="0"></a> Компания АВС — поставки электронной техники ведущих мировых производителей.</p>
<p>В компании АВС вы всегда найдете:</p>
<ul>
<li> телевизоры
<li> видиомагнотофоны
<li> видеоплейеры
<li> музыкальные центры
<li> компьютеры
<li> принтеры и сканеры
<li> и другие товары.
</ul>
<p> Для получения дополнительной информации о наличии товара перейдите в соответствующий раздел сайта. </p>
<p>Компания оказывает <a href="abc_serv.html">услуги</a> по обслуживанию продаваемой электоники.</p>
<p><a href="mailto:[email protected]">Пишите сюда</a></p>
</td>
</tr>
</table>
</center>
</body>
</html>
Теперь наша страница будет выглядеть ТАК.
Осталось сделать вторую и третью страницу сайта. Для того чтобы упростить работу сделаем так — сохраним нашу страницу index.html под другим именем servis.html, а затем подредактируем файл.
Выбираем в блокноте команду Файл->Сохранить как... , выбираем ту-же директорию где находиться файл index.html, пишем имя страницы под которой мы хотим сохранить файл servis.html и жмем ОК.
Т.е. на компьютере у вас должно быть 2 пока что одинаковых страницы — index.html и servis.html.
Теперь изменим название страницы (между тегами <title> и </title>), и изменим текст страницы, например вот так:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Услуги компании АВС</title>
</head>
<body>
<center>
<table border="0" width="1000" height="600">
<tr>
<td colspan="2" bgcolor="#00CC99" width="1000" height="100"><img src="images/abc_top.gif" width="1000" height="100"></td>
</tr>
<tr>
<td bgcolor="#CCCCCC" height="500" width="200" background="images/abc1.gif" valign="top" align="left">
<table width="200">
<tr>
<td bgcolor="#0000FF"><span style="color:#FFFFFF; font-weight:bold">Меню</span></td>
</tr>
<tr>
<td style="font-size:16px; font-family:sans-serif; color:#770000; font-weight:600">Главная</td>
</tr>
<tr>
<td style="font-size:16px; font-family:sans-serif; color:#770000; font-weight:600">Услуги</td>
</tr>
<tr>
<td style="font-size:16px; font-family:sans-serif; color:#770000; font-weight:600">Ссылки</td>
</tr>
</table>
</td>
<td width="800" valign="top" align="left">
<H1 align="center" style="color:#0000FF">Услуги компании</H1>
<p>Компания АВС оказывает следующие услуги потребителям нашей продукции:</p>
<UL>
<LI>Продажа электроники
<LI>Установка и настройка нового электронного оборудования
<LI>Продажа комплектующих на продоваемую электронику
<LI>Ремонт электронной техники </LI>
</UL>
</td>
</tr>
</table>
</center>
</body>
</html>
И сохраним... (Файл -> Сохранить).
Теперь наша страница будет выглядеть ТАК.
По такому же алгоритму создадим третью страницу сайта ssilki.html.
Вот ее HTML-код:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Ссылки сайта</title>
</head>
<body>
<center>
<table border="0" width="1000" height="600">
<tr>
<td colspan="2" bgcolor="#00CC99" width="1000" height="100"><img src="images/abc_top.gif" width="1000" height="100"></td>
</tr>
<tr>
<td bgcolor="#CCCCCC" height="500" width="200" background="images/abc1.gif" valign="top" align="left">
<table width="200">
<tr>
<td bgcolor="#0000FF"><span style="color:#FFFFFF; font-weight:bold">Меню</span></td>
</tr>
<tr>
<td style="font-size:16px; font-family:sans-serif; color:#770000; font-weight:600">Главная</td>
</tr>
<tr>
<td style="font-size:16px; font-family:sans-serif; color:#770000; font-weight:600">Услуги</td>
</tr>
<tr>
<td style="font-size:16px; font-family:sans-serif; color:#770000; font-weight:600">Ссылки</td>
</tr>
</table>
</td>
<td width="800" valign="top" align="left">
<H1 align="center" style="color:#0000FF">Ссылки</H1>
<p>Компания поддерживает отношения со следующими Интернет-ресурсами:</p>
<ul>
<li><a href="https://sevidi.ru/" target="_blank">Веб-студией Sevidi</a></li>
<li><a href="http://sevidi.narod.ru/">Сайтом о сайтах</a> </li>
</ul>
</td>
</tr>
</table>
</center>
</body>
</html>
Cохраним... (Файл -> Сохранить).
Теперь наша страница будет выглядеть ТАК.
Теперь осталось установить связь между созданными страницами. Для этого "оживим" созданное нами меню.
Откроем, используя редактор Блокнот, Главную страницу нашего сайта index.html и в разделе меню внесем следующие изменения в HTML-код:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Компания АВС</title>
</head>
<body>
<center>
<table border="0" width="1000" height="600">
<tr>
<td colspan="2" bgcolor="#00CC99" width="1000" height="100"><img src="images/abc_top.gif" width="1000" height="100"></td>
</tr>
<tr>
<td bgcolor="#CCCCCC" height="500" width="200" background="images/abc1.gif" valign="top" align="left">
<table width="200">
<tr>
<td bgcolor="#0000FF"><span style="color:#FFFFFF; font-weight:bold">Меню</span></td>
</tr>
<tr>
<td style="font-size:16px; font-family: sans-serif; color:#770000; font-weight:600"><a href="index5.html">Главная</a></td>
</tr>
<tr>
<td style="font-size:16px; font-family:Arial; color:#770000; font-weight:600"><a href="servis.html" target="_blank">Услуги</a></td>
</tr>
<tr>
<td style="font-size:16px; font-family:Arial; color:#770000; font-weight:600"><a href="ssilki.html">Ссылки</a></td>
</tr>
</table>
</td>
<td width="800" valign="top" align="left">
<h1 align="center" style="color:#FF0000">Компания АВС</h1>
<h2 align="center" style="color:#0000FF">О компании</h2>
<p style="font-size:large; color:#0000FF"><a href="abc_serv.html"><img src="images/abc.gif" border="0"></a> Компания АВС — поставки электронной техники ведущих мировых производителей.</p>
<p>В компании АВС вы всегда найдете:</p>
<ul>
<li> телевизоры
<li> видиомагнотофоны
<li> видеоплейеры
<li> музыкальные центры
<li> компьютеры
<li> принтеры и сканеры
<li> и другие товары.
</ul>
<p> Для получения дополнительной информации о наличии товара перейдите в соответствующий раздел сайта. </p>
<p>Компания оказывает <a href="abc_serv.html">услуги</a> по обслуживанию продаваемой электоники.</p>
<p><a href="mailto:[email protected]">Пишите сюда</a></p>
</td>
</tr>
</table>
</center>
</body>
</html>
Cохраним... (Файл -> Сохранить).
Теперь наша страница будет выглядеть ТАК.
Внесем соответствующие изменения во вторую HTML-страницу сайта:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Услуги компании АВС</title>
</head>
<body>
<center>
<table border="0" width="1000" height="600">
<tr>
<td colspan="2" bgcolor="#00CC99" width="1000" height="100"><img src="images/abc_top.gif" width="1000" height="100"></td>
</tr>
<tr>
<td bgcolor="#CCCCCC" height="500" width="200" background="images/abc1.gif" valign="top" align="left">
<table width="200">
<tr>
<td bgcolor="#0000FF"><span style="color:#FFFFFF; font-weight:bold">Меню</span></td>
</tr>
<tr>
<td style="font-size:16px;font-family:sans-serif; color:#770000;font-weight:600"><a href="index6.html"target="_blank">Главная</a></td>
</tr>
<tr>
<td style="font-size:16px; font-family:sans-serif; color:#770000; font-weight:600"><a href="servis1.html">Услуги</a></td>
</tr>
<tr>
<td style="font-size:16px; font-family:sans-serif; color:#770000; font-weight:600"><a href="ssilki1.html" target="_blank">Ссылки</a></td>
</tr>
</table>
</td>
<td width="800" valign="top" align="left">
<H1 align="center" style="color:#0000FF">Услуги компании</H1>
<p>Компания АВС оказывает следующие услуги потребителям нашей продукции:</p>
<UL>
<LI>Продажа электроники
<LI>Установка и настройка нового электронного оборудования
<LI>Продажа комплектующих на продоваемую электронику
<LI>Ремонт электронной техники </LI>
</UL></td>
</tr>
</table>
</center>
</body>
</html>
Cохраним... (Файл -> Сохранить).
Теперь наша страница будет выглядеть ТАК.
Внесем соответствующие изменения в третью HTML-страницу сайта:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Ссылки сайта</title>
</head>
<body>
<center>
<table border="0" width="1000" height="600">
<tr>
<td colspan="2" bgcolor="#00CC99" width="1000" height="100"><img src="images/abc_top.gif" width="1000" height="100"></td>
</tr>
<tr>
<td bgcolor="#CCCCCC" height="500" width="200" background="images/abc1.gif" valign="top" align="left">
<table width="200">
<tr>
<td bgcolor="#0000FF"><span style="color:#FFFFFF; font-weight:bold">Меню</span></td>
</tr>
<tr>
<td style="font-size:16px; font-family:sans-serif; color:#770000; font-weight:600"><a href="index6.html" target="_blank">Главная</a></td>
</tr>
<tr>
<td style="font-size:16px; font-family:sans-serif; color:#770000; font-weight:600"><a href="servis1.html" target="_blank">Услуги</a></td>
</tr>
<tr>
<td style="font-size:16px; font-family:sans-serif; color:#770000; font-weight:600"><a href="ssilki1.html">Ссылки</a></td>
</tr>
</table>
</td>
<td width="800" valign="top" align="left">
<H1 align="center" style="color:#0000FF">Ссылки</H1>
<p>Компания поддерживает отношения со следующими Интернет-ресурсами:</p>
<ul>
<li><a href="http://www/" target="_blank">Веб-студией Sevidi</a></li>
<li><a href="http://localhost/">Сайтом о сайтах</a> </li>
</ul>
</td>
</tr>
</table>
</center>
</body>
</html>
Cохраним... (Файл -> Сохранить).
Теперь наша страница будет выглядеть ТАК.
Вот мы и сделали простенький сайтик, который вы можете подредактировать и разместить в интернете.
Обсудить на форуме