Сдам Сам

ПОЛЕЗНОЕ


КАТЕГОРИИ







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





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

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

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

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

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

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

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

 

ЧТО ДАЛЬШЕ.

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

 

 







Что делает отдел по эксплуатации и сопровождению ИС? Отвечает за сохранность данных (расписания копирования, копирование и пр.)...

ЧТО И КАК ПИСАЛИ О МОДЕ В ЖУРНАЛАХ НАЧАЛА XX ВЕКА Первый номер журнала «Аполлон» за 1909 г. начинался, по сути, с программного заявления редакции журнала...

Конфликты в семейной жизни. Как это изменить? Редкий брак и взаимоотношения существуют без конфликтов и напряженности. Через это проходят все...

Что будет с Землей, если ось ее сместится на 6666 км? Что будет с Землей? - задался я вопросом...





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


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