Сдам Сам

ПОЛЕЗНОЕ


КАТЕГОРИИ







Пример создания Интернет сайта





Ну вот и пришло время создать нечто более сложное, используя полученные знания в предыдущих уроках.

В этом заключительном уроке мы сделаем 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>

Для создания каркаса страницы мы будем использовать таблицу, но чуть более хитрую чем мы проходили вHTML-уроке о таблицах. Нам нужна таблица, в которой в первой строке будет 1 ячейка, а в другой строке будет 2 ячейки, т.е. вот такая нам нужна таблица :

ячейка 1
ячейка 2 ячейка 3

В ячейке 1 мы расположим шапку сайта, в ячейке 2 будет меню сайта, а в ячейке 3 будет содержимое страницы.



Для того чтобы сделать такую таблицу напишите вот такой код

<table>


<tr>
<td colspan="2"></td>
</tr>


<tr>
<td>&nbsp;</td>
<td>&nbsp;</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 ячейки.

Так. Теперь зададим размеры таблицы. Ширину таблицы сделаем 700 пикселей. Из рассчета что кто-то из посетителей сайта может использовать монитор 800х600 точек, и просматривать более широкий сайт ему будет не комфортно.

Высоту таблицы сделаем 600 пикселей

Код нашей страницы теперь будет вот такой.

<html>

<head>
<title>Сайт о работе в интернете. Информация и ссылки на сайты о работе в интернете</title>

</head>

 

<body>

<center>

<table width="700" 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="700" height="600">


<tr>
<td colspan="2" bgcolor="#0СCCСС">Здесь будет шапка страницы</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="700" height="600">


<tr>
<td colspan="2" bgcolor="#0СCCСС"><img src="sitelogo.jpg" width="719" height="79"></td>
</tr>


<tr>
<td bgcolor="СCCCCCC"> Здесь будет меню нашей страницы</td>
<td> В данной области будет содержимое нашей страницы </td>
</tr>


</table>

</center>

 

</body>

</html>

Теперь установим точные размеры ячейки таблицы, предназначенной для шапки. Т.к. картинка шапки у нас имеет размер 719х79, то и размер ячейки таблицы сделаем 719 х 79.

 

<html>

<head>
<title>Сайт о работе в интернете. Информация и ссылки на сайты о работе в интернете</title>

</head>

 

<body>

<center>

<table width="700" height="600">


<tr>
<td colspan="2" bgcolor="#0СCCСС" width="719" height="79"><img src="sitelogo.jpg" width="719" height="79"></td>
</tr>


<tr>
<td bgcolor="СCCCCCC"> Здесь будет меню нашей страницы</td>
<td> В данной области будет содержимое нашей страницы </td>
</tr>


</table>

</center>

 

</body>

</html>

 

Теперь наша страница будет выглядеть ТАК.

Установим ширину меню равной 150 пикселей, для этого добавим width="150" в соответствующий тег

<html>

<head>
<title>Сайт о работе в интернете. Информация и ссылки на сайты о работе в интернете</title>

</head>

 

<body>

<center>

<table width="700" height="600">


<tr>
<td colspan="2" bgcolor="#0СCCСС" width="719" height="79"><img src="sitelogo.jpg" width="719" height="79"></td>
</tr>


<tr>
<td bgcolor="СCCCCCC" width="150" > Здесь будет меню нашей страницы</td>
<td> В данной области будет содержимое нашей страницы </td>
</tr>


</table>

</center>

 

</body>

</html>

Задний план меню "зальем" вот таким фоном, для этого сохраните этот фон с его "родным" именем sv11.jpg в туже директорию где находиться файл страницы.

Прописываем нужный код:

 

<html>

<head>
<title>Сайт о работе в интернете. Информация и ссылки на сайты о работе в интернете</title>

</head>

 

<body>

<center>

<table width="700" height="600">


<tr>
<td colspan="2" bgcolor="#0СCCСС" width="719" height="79"><img src="sitelogo.jpg" width="719" height="79"></td>
</tr>


<tr>
<td bgcolor="СCCCCCC" width="150" background="sv11.jpg"> Здесь будет меню нашей страницы</td>
<td> В данной области будет содержимое нашей страницы </td>
</tr>


</table>

</center>

 

</body>

</html>

Теперь наша страница будет выглядеть ТАК.

Возможно возник вопрос, почему браузер не "отрабатывает" ширину меню 150 пикселей ? Меню ведь выглядит шире чем 150 пикселей. Да. Есть такой глюк браузера, но все встанет на свои места если начать писать текст в основном разделе страницы.

Для того, чтобы подтвердить это, добавим текста на наш сайт.

<html>

<head>
<title>Сайт о работе в интернете. Информация и ссылки на сайты о работе в интернете</title>

</head>

 

<body>

<center>

<table width="700" height="600">


<tr>
<td colspan="2" bgcolor="#0СCCСС" width="719" height="79"><img src="sitelogo.jpg" width="719" height="79"></td>
</tr>


<tr>
<td bgcolor="СCCCCCC" width="150" background="sv11.jpg"> Здесь будет меню нашей страницы</td>
<td>Данный сайт посвещен работе в Интернете. Если ты новичек в этой области, то тебе сюда. Все самое полезное о работе только на этом сайте.</td>
</tr>


</table>

</center>

 

</body>

</html>

Сайт будет выглядеть вот ТАК.

Теперь все почти хорошо. Но, однако, есть небольшие проблемки. Текст на нашей Интернет странице отображается ровно посередине (по вертикали), а следовало бы чтобы текст был расположен вверху ячеек.

Для этого нам надо прописать еще один параметр в теги <td> меню и основного содержимого страницы.

Этот параметр мы не проходили в уроке о таблицах, - это параметр выравнивания по вертикали valign="top".

Значение top означает что содержимое будет располагаться вверху.

<html>

<head>
<title>Сайт о работе в интернете. Информация и ссылки на сайты о работе в интернете</title>

</head>

 

<body>

<center>

<table width="700" height="600">


<tr>
<td colspan="2" bgcolor="#0СCCСС" width="719" height="79"><img src="sitelogo.jpg" width="719" height="79"></td>
</tr>


<tr>
<td bgcolor="СCCCCCC" width="150" background="sv11.jpg" valign="top" > Здесь будет меню нашей страницы</td>
<td valign="top">Данный сайт посвещен работе в Интернете. Если ты новичек в этой области, то тебе сюда. Все самое полезное о работе только на этом сайте.</td>
</tr>


</table>

</center>

 

</body>

</html>

Теперь наша страница будет выглядеть ТАК.

 

Далее делаем меню. Пуская, для начала, наш сайт будет состоять из 2-х страниц. Главная страница и страница ссылок.

Пусть пункты меню пусть называются Главная и Ссылки. Для того чтобы "сдвинуть" текст используем тег <br>

<html>

<head>
<title>Сайт о работе в интернете. Информация и ссылки на сайты о работе в интернете</title>

</head>

 

<body>

<center>

<table width="700" height="600">


<tr>
<td colspan="2" bgcolor="#0СCCСС" width="719" height="79"><img src="sitelogo.jpg" width="719" height="79"></td>
</tr>


<tr>
<td bgcolor="СCCCCCC" width="150" 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="700" height="600">


<tr>
<td colspan="2" bgcolor="#0СCCСС" width="719" height="79"><img src="sitelogo.jpg" width="719" height="79"></td>
</tr>


<tr>
<td bgcolor="СCCCCCC" width="150" 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="700" height="600">


<tr>
<td colspan="2" bgcolor="#0СCCСС" width="719" height="79"><img src="sitelogo.jpg" width="719" height="79"></td>
</tr>


<tr>
<td bgcolor="СCCCCCC" width="150" 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://russia-job.ru">Сайт о работе в интернете russia-job.ru</a>

</td>
</tr>


</table>

</center>

 

</body>

</html>

И сохраним... (Файл -> Сохранить)

Вторая страница сайта будет выглядеть ТАК.

Вот мы и сделали простенький сайтик, который вы можете подредактировать и разместить в интернете.

Что бы уменьшить количество пустых строк можно уплотнить код, однако я сделал пропуски чтобы было наглядней видно структуру страницы. А так можно разместить весь код вообще в одну строчку.
Но не стоит. Иначе будет трудно искать ошибки если что...

Если есть какие либо вопросы по этому примеру - пишите!

 

ЧТО ДАЛЬШЕ.

Конечно сделанный для примера сайт не так крут. И даже в этом сайте пришлось использовать готовые картинки, которые вы возможно создавать не умеете, однако это та основа, которую должен знать каждый. Дальше Вы можете зайти в раздел "Электронные книги" и почитать более подробно о том, как сделать сайт лучше и насыщеннее. Главное не останавливаться, пробовать, и все получится.

 

 









Не нашли то, что искали? Воспользуйтесь поиском гугл на сайте:


©2015- 2019 zdamsam.ru Размещенные материалы защищены законодательством РФ.