Пример создания сайта.
Итак. Пришло время создать нечто более сложное, чем мы делали до этого, но
используя полученные знания в предыдущих уроках.
В этом уроке курса Money Master часть 1 мы сделаем 2х страничный сайт...например,
о заработке в интернете.
Сначала определимся как это будет приблизительно выглядеть.
Вверху сайта мы сделаем "шапку сайта". Слева будет меню сайта с ссылками
на другие страницы сайта, остальное место будет занимать контент (содержимое
) сайта.
Идея понятна ? Приступаем.
Запускаем Блокнот и пишем наш минимальный набор для создания страницы.
<html>
<head>
<title> </title>
</head>
<body>
</body>
</html>
Теперь напишем между тегами <title> </title> название нашей страницы,
например вот так
<html>
<head>
<title>Сайт о заработке в интернете. Информация
и ссылки на сайты о заработке в интернете</title>
</head>
<body>
</body>
</html>
Далее разместим теги <center> и </center>, чтобы все содержимое
нашего сайта было размещено по центру страницы.
Если вы не забыли, теги <center> и </center> надо разместить между
<body> и </body>, т.е. вот так
<html>
<head>
<title>Сайт о заработке в интернете. Информация и ссылки на сайты о заработке
в интернете</title>
</head>
<body>
<center>
</center>
</body>
</html>
Для создания каркаса страницы мы будем использовать таблицу, но чуть более
хитрую чем мы проходили в "таблицах" Нам нужна
таблица, в которой в первой строке будет 1 ячейка, а в другой строке будет 2
ячейки, т.е. вот такая нам нужна таблица :
ячейка 1
|
ячейка 2
|
ячейка 3
|
В ячейке 1 мы расположим шапку сайта, в ячейке 2 будет меню сайта, а в ячейке
3 будет содержимое страницы.
Для того чтобы сделать такую таблицу напишите вот такой код
<table>
<tr>
<td colspan="2"></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
Т.е. код нашей страницы будет вот такой :
<html>
<head>
<title>Сайт о заработке в интернете. Информация и ссылки на сайты о заработке
в интернете</title>
</head>
<body>
<center>
<table>
<tr>
<td colspan="2"></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</center>
</body>
</html>
Как видите, в такой вот "хитрой" таблице используется лишь 1 пара
тегов <td> в первой строке таблицы, а не два, как при построении таблицы
2х2. Но зато появился параметр colspan="2". Этот параметр как бы говорит,
какого размера должна быть ячейка. В данном случае ячейка должна быть шириной
в 2 ячейки.
Так. Теперь зададим размеры таблицы. Ширину таблицы сделаем 750 пикселей. Из
рассчета что кто-то из посетителей сайта может использовать монитор 800х600
точек, и просматривать более широкий сайт ему будет не комфортно.
Высоту таблицы сделаем 600 пикселей
Т.е. код нашей страницы теперь будет вот такой.
<html>
<head>
<title>Сайт о заработке в интернете. Информация и ссылки на сайты о заработке
в интернете</title>
</head>
<body>
<center>
<table width="750"
height="600">
<tr>
<td colspan="2">Здесь у нас будет шапка</td>
</tr>
<tr>
<td> Здесь будет меню</td>
<td> Здесь будет содержимое страницы </td>
</tr>
</table>
</center>
</body>
</html>
Чтобы стало видно границы частей сайта - "зальем" область меню и
область шапки цветом. Например вот так
<html>
<head>
<title>Сайт о заработке в интернете. Информация и ссылки на сайты о заработке
в интернете</title>
</head>
<body>
<center>
<table width="750" height="600">
<tr>
<td colspan="2" bgcolor="#00CC99">Здесь
у нас будет шапка</td>
</tr>
<tr>
<td bgcolor="#CCCCCC">
Здесь будет меню</td>
<td> Здесь будет содержимое страницы </td>
</tr>
</table>
</center>
</body>
</html>
Сохраните файл под именем index.html , для того чтобы его можно было
просмотреть как он будет выглядеть в браузере. Если
у вас не так - ищите ошибку.
Возможно возник вопрос. Почему назвали файл страницы именно так ?
Есть правило. Главная страница сайта должна называться 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 пикселей. Да. Есть такой глюк браузера,
но все встанет на свои места если начать писать текст в основном разделе страницы.
(Или, можно задать жестко ширину ячейки в которой будет писать контент, дописав
width="550")
Чтобы подтвердить это, добавим текста на наш сайт.
<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х-страничный. Главная страница и страница
ссылок.
Пусть пункты меню пусть называются Главная и Ссылки. Для того, чтобы "сдвинуть"
текст на следующую строчку - используем тег <br> Два <br> сдвинут
текст на 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" >
Главная <br><br>
Ссылки
</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><br><br>
<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><br><br>
<a href="ssilki.html">Ссылки</a>
</td>
<td valign="top">На этой странице будут
размещены ссылки на сайты о заработке в интернете<br><br>
<a href="http://moneymaster.ru">Сайт
о заработке в интернете MoneyMaster</a>
</td>
</tr>
</table>
</center>
</body>
</html>
И сохраним... (Файл -> Сохранить)
Вот мы и сделали простенький сайтик, который вы можете подредактировать и разместить
в интернете.
Возможно у кого то возник вопрос. А почему столько много пустых строк, нельзя
ли уплотнить код ?
Можно. Я сделал пропуски чтобы было наглядней видно структуру страницы. А так
можно разместить весь код вообще в одну строчку
Но не стоит. Иначе будет трудно искать ошибки если что...
|