Возможно возник вопрос. Почему назвали файл страницы именно так ?
Есть правило. Главная страница сайта должна называться index.html, или index.htm . ! Или index.php если страница написана на языке PHP. Запомните это.
Тогда при обращении к сайту, т.е. когда набираешь адрес сайта в браузере, можно не набирать index.html или index.htm, достаточно набрать адрес вашего сайта.
Теперь вставим шапку нашего сайта.
Сохраните картинку шапки у себя на компьютере в той-же директории где находиться файл страницы под ее "родным" именем sitelogo.jpg
(т.е. наведите курсор мышки на картинку, нажмите правую кнопку мышки и выберите "Сохранить рисунок как..." )
Где брать такие шапки ? Рисовать самим.
Теперь вставляем картинку шапки в наш сайт. О том как вставить картинку на сайте мы разбирали здесь.
<html> <head>
<title>Сайт о заработке в интернете. Информация и ссылки на сайты о заработке в интернете</title>
</head>
<body>
<center>
<table width="750" height="600">
<tr>
<td colspan="2" bgcolor="#00CC99">
<img src="sitelogo.jpg" width="750" height="120"></td>
</tr> <tr>
<td bgcolor="#CCCCCC">
Здесь будет меню</td>
<td> Здесь будет содержимое страницы </td>
</tr> </table>
</center>
</body>
</html>
Теперь установим точные размеры ячейки таблицы, предназначенной для шапки. Т.к. картинка шапки у нас имеет размер 750х120, то и размер ячейки таблицы сделаем 750 х 120.
<html> <head>
<title>Сайт о заработке в интернете. Информация и ссылки на сайты о заработке в интернете</title>
</head>
<body>
<center>
<table width="750" height="600">
<tr>
<td colspan="2" bgcolor="#00CC99"
width="750" height="120"><img src="sitelogo.jpg" width="750" height="120"></td>
</tr> <tr>
<td bgcolor="#CCCCCC"> Здесь будет меню</td>
<td> Здесь будет содержимое страницы </td>
</tr>
</table>
</center>
</body>
</html>
Установим ширину меню равной 200 пикселей, для этого добавим width="200" в соответствующий тег
<html> <head>
<title>Сайт о заработке в интернете. Информация и ссылки на сайты о заработке в интернете</title>
</head>
<body>
<center>
<table width="750" height="600">
<tr>
<td colspan="2" bgcolor="#00CC99" width="750" height="120"><img src="sitelogo.jpg" width="750" height="120"></td>
</tr>
<tr>
<td bgcolor="#CCCCCC"
width="200" > Здесь будет меню</td>
<td> Здесь будет содержимое страницы </td>
</tr> </table>
</center>
</body>
</html>
Задний план меню "зальем" вот таким фоном, для этого сохраните этот фон с его "родным" именем sv11.jpg в туже директорию где находиться файл страницы.
А теперь прописываем нужный код
<html> <head>
<title>Сайт о заработке в интернете. Информация и ссылки на сайты о заработке в интернете</title>
</head>
<body>
<center>
<table width="750" height="600">
<tr>
<td colspan="2" bgcolor="#00CC99" width="750" height="120"><img src="sitelogo.jpg" width="750" height="120"></td>
</tr>
<tr>
<td bgcolor="#CCCCCC" width="200"
background="sv11.jpg"> Здесь будет меню</td>
<td> Здесь будет содержимое страницы </td>
</tr> </table>
</center>
</body>
</html>
У вас возможно возник вопрос, почему браузер не "отрабатывает" ширину меню 200 ? Меню ведь выглядит шире чем 200 пикселей. Да. Есть такой глюк браузера, но все встанет на свои места если начать писать текст в основном разделе страницы.
Чтобы подтвердить это, добавим текста на наш сайт.
<html> <head>
<title>Сайт о заработке в интернете. Информация и ссылки на сайты о заработке в интернете</title>
</head>
<body>
<center>
<table width="750" height="600">
<tr>
<td colspan="2" bgcolor="#00CC99" width="750" height="120"><img src="sitelogo.jpg" width="750" height="120"></td>
</tr>
<tr>
<td bgcolor="#CCCCCC" width="200" background="sv11.jpg"> Здесь будет меню</td>
<td>
Этот сайт посвящен заработку в интернете. Если вы совсем новичек, то этот сайт поможет вас сориентировать и подскажет где и как можно заработать в сети.</td>
</tr> </table>
</center>
</body>
</html>
Теперь все почти ОК...Почти потому что на лицо небольшие проблемки. Текст отображается ровно посередине (по вертикали), а следовало бы чтобы текст был расположен вверху ячеек.
Для этого нам надо прописать еще один параметр в теги <td> меню и основного содержимого страницы.
Этот параметр мы не проходили в уроке о таблицах, - это параметр выравнивания по вертикали valign="top".
Значение top означает что содержимое будет располагаться вверху.
<html> <head>
<title>Сайт о заработке в интернете. Информация и ссылки на сайты о заработке в интернете</title>
</head>
<body>
<center>
<table width="750" height="600">
<tr>
<td colspan="2" bgcolor="#00CC99" width="750" height="120"><img src="sitelogo.jpg" width="750" height="120"></td>
</tr>
<tr>
<td bgcolor="#CCCCCC" width="200" background="sv11.jpg"
valign="top" > Здесь будет меню</td>
<td valign="top">Этот сайт посвящен заработку в интернете. Если вы совсем новичек, то этот сайт поможет вас сориентировать и подскажет где и как можно заработать в сети.</td>
</tr> </table>
</center>
</body>
</html>
Далее делаем меню. Пока наш сайт будет 2х-страничный. Главная страница и страница ссылок.
Пусть пункты меню пусть называются Главная и Ссылки. Для того чтобы "сдвинуть" текст используем тег
<html> <head>
<title>Сайт о заработке в интернете. Информация и ссылки на сайты о заработке в интернете</title>
</head>
<body>
<center>
<table width="750" height="600">
<tr>
<td colspan="2" bgcolor="#00CC99" width="750" height="120"><img src="sitelogo.jpg" width="750" height="120"></td>
</tr>
<tr>
<td bgcolor="#CCCCCC" width="200" background="sv11.jpg" valign="top" >
Главная Ссылки
</td>
<td valign="top">Этот сайт посвящен заработку в интернете. Если вы совсем новичек, то этот сайт поможет вас сориентировать и подскажет где и как можно заработать в сети.</td>
</tr> </table>
</center>
</body>
</html>
Теперь надо сделать текст меню в виде ссылок. Слово Главная залинкуем на страницу index.html, а слово Ссылки на страницу ssilki.html, которую мы создадим чуть позже.
Как сделать текст в виде ссылки мы проходили здесь.
<html> <head>
<title>Сайт о заработке в интернете. Информация и ссылки на сайты о заработке в интернете</title>
</head>
<body>
<center>
<table width="750" height="600">
<tr>
<td colspan="2" bgcolor="#00CC99" width="750" height="120"><img src="sitelogo.jpg" width="750" height="120"></td>
</tr>
<tr>
<td bgcolor="#CCCCCC" width="200" background="sv11.jpg" valign="top" >
<a href="index.html">Главная</a>
<a href="ssilki.html">Ссылки</a>
</td>
<td valign="top">Этот сайт посвящен заработку в интернете. Если вы совсем новичек, то этот сайт поможет вас сориентировать и подскажет где и как можно заработать в сети.</td>
</tr> </table>
</center>
</body>
</html>
Осталось сделать вторую страницу сайта. Для того чтобы упростить работу сделаем так - сохраним нашу страницу index.html под другим именем ssilki.html, а затем подредактируем файл.
Выбираем в блокноте команду Файл->Сохранить как... , выбираем ту-же директорию где находиться файл index.html, пишем имя страницы под которой мы хотим сохранить файл ssilki.html . жмем ОК.
Т.е. на компьютере у вас должно быть 2 пока что одинаковых страницы - index.html и ssilki.html.
Теперь изменим название страницы (между тегами <title> и </title>), и изменим текст страницы, например вот так
<html> <head>
<title>
Ссылки на сайты о заработке в интернете</title> </head>
<body>
<center>
<table width="750" height="600">
<tr>
<td colspan="2" bgcolor="#00CC99" width="750" height="120"><img src="sitelogo.jpg" width="750" height="120"></td>
</tr>
<tr>
<td bgcolor="#CCCCCC" width="200" background="sv11.jpg" valign="top" >
<a href="index.html">Главная</a>
<a href="ssilki.html">Ссылки</a>
</td>
<td valign="top">
На этой странице будут размещены ссылки на сайты о заработке в интернете <a href="http://softapteka.ucoz.ru">Apteka</a>
</td>
</tr> </table>
</center>
</body>
</html>
И сохраним... (Файл -> Сохранить)
Вторая страница сайта будет выглядеть ТАК.
Вот мы и сделали простенький сайтик, который вы можете подредактировать и разместить в интернете.
Возможно у кого то возник вопрос. А почему столько много пустых строк, нельзя ли уплотнить код ?
Можно. Я сделал пропуски чтобы было наглядней видно структуру страницы. А так можно разместить весь код вообще в одну строчку
Но не стоит. Иначе будет трудно искать ошибки если что...
ЧТО ДАЛЬШЕ.
Конечно сделанный для примера сайт не так крут. И даже в этом сайте пришлось использовать готовые картинки, которые вы возможно создавать не умеете.
Администрация
