Урок восьмой

Создаем сайт

   Подведем итоги наших знаний от прошлых 8-ми занятий.
   Мы умеем делать в HTML:

  • Создавать страницы;
  • Набирать и форматировать текст;
  • Ставить ссылки на страницы;
  • Работать с цветами фона и текста;
  • Строить и оформлять таблицы;

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

   В этом уроке курса мы сделаем 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>

   Как видите, в такой вот "хитрой" таблице используется лишь одна пара тегов <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, достаточно набрать адрес вашего сайта. 

   Теперь вставим шапку нашего сайта.

   Сохраните картинку шапки у себя на компьютере в той-же директории где находиться файл страницы под ее "родным" именем stroymaster6.gif

(т.е. наведите курсор мышки на картинку, нажмите правую кнопку мышки и выберите "Сохранить рисунок как..." ). Выбираем главную папку WWW и сохраняем рисунок в папке images (смотри урок четыре). Почему именно так? Хорошим тоном в HTML считается расположение графических файлов в одной папке, дабы не выискивать всякий раз нужный объект. Обычно, такую папку-хранилище для картинок называют "images".

   Где брать такие шапки ? Рисовать самим. О том как это делать будет рассказано отдельно.

   Обычно, во всяком случае, традиционно, изображения на html-странице бывают 2-х видов: .gif и .jpg . Это не значит, что браузер не станет отображать формат .bmp или .tif какой-нибудь, но есть определенные традиции и не советую их нарушать – так, на всякий случай.

   Теперь вставляем картинку шапки в наш сайт. О том как вставить картинку на сайте мы разбирали ЗДЕСЬ.

<html>

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

</head> 

<body>

<center>

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


<tr>
<td colspan="2" bgcolor="#00CC99"><img src="images/stroymaster6.gif" width="750" height="144"></td>
</tr>


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


</table>

</center>

 

</body>

</html>

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

 

<html>

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

</head>

 

<body>

<center>

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


<tr>
<td colspan="2" bgcolor="#00CC99" width="750" height="144"><img src="images/stroymaster6.gif" width="750" height="144"></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="144"><img src="images/stroymaster6.gif" width="750" height="144"></td>
</tr> <tr>
<td bgcolor="#CCCCCC" width="200"> Здесь будет меню</td>
<td> Здесь будет содержимое страницы </td>
</tr>

</table>

</center> 

</body>

</html>

   Задний план меню "зальем" вот таким фоном, для этого сохраните этот фон с его "родным" именем sv12.gif в туже директорию где находиться файл страницы. (т.е. наведите курсор мышки на картинку, нажмите правую кнопку мышки и выберите "Сохранить рисунок как..." ). Выбираем главную папку WWW и сохраняем рисунок в папке images (смотри урок четыре).

А теперь прописываем нужный код

<html>

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

</head>

 

<body>

<center>

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


<tr>
<td colspan="2" bgcolor="#00CC99" width="750" height="144"><img src="images/stroymaster6.gif" width="750" height="144"></td>
</tr> <tr>
<td bgcolor="#CCCCCC" width="200" background="sv11.jpg"> ="images/sv12.gif" width="200" >Здесь будет меню</td>
<td> Здесь будет содержимое страницы </td>
</tr>

</table>

</center> 

</body>

</html>

   Для тех, кто ещё не успел разобраться, чем собственно отличаются форматы gif и jpg (он же jpeg), вскользь упомяну, что gif имеет максимум 8-ми битный формат цвета, а значит, содержит палитру из 256 оттенков и менее, в то время, как jpg (24 бита) содержит четкую палитру из 256 оттенков красного, 256 оттенков зеленого и 256 оттенков синего. Таким образом, jpg больше подходит для фотографий и других сложных композиций, а gif – для простенькой, немногоцветной графики, а ещё у gif есть милое моему сердцу качество – в нем можно задавать прозрачный цвет.

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

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

   Чтобы подтвердить это, добавим текста на наш сайт.

<html>

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

</head>

 

<body>

<center>

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


<tr>
<td colspan="2" bgcolor="#00CC99" width="750" height="144"><img src="images/stroymaster6.gif" width="750" height="144"></td>
</tr> <tr>
<td bgcolor="#CCCCCC" width="200" background="images/sv12.gif" width="200" >Здесь будет меню</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="144"><img src="images/stroymaster6.gif" width="750" height="144"></td>
</tr> <tr>
<td bgcolor="#CCCCCC" width="200" background="images/sv12.gif" width="200" valign="top" >Здесь будет меню</td>
<td valign="top">Это первый созданный мною документ. Благодаря урокам я научился создавать страницы сайта, вставлять и форматировать текст, работать со ссылками и изображениями. </td>
</tr>

</table>

</center> 

</body>

</html>

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

 

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

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

<html>

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

</head>

 

<body>

<center>

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


<tr>
<td colspan="2" bgcolor="#00CC99" width="750" height="144"><img src="images/stroymaster6.gif" width="750" height="144"></td>
</tr> <tr>
<td bgcolor="#CCCCCC" width="200" background="images/sv12.gif" width="200" valign="top" ><br>Главная <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="144"><img src="images/stroymaster6.gif" width="750" height="144"></td>
</tr> <tr>
<td bgcolor="#CCCCCC" width="200" background="images/sv12.gif" width="200" valign="top" ><br>

<a href="index.html">Главная <br><br></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>Cсылки сайта о сайтах. </title>

</head>

 

<body>

<center>

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


<tr>
<td colspan="2" bgcolor="#00CC99" width="750" height="144"><img src="images/stroymaster6.gif" width="750" height="144"></td>
</tr> <tr>
<td bgcolor="#CCCCCC" width="200" background="images/sv12.gif" width="200" valign="top" ><br>

<a href="index.html">Главная <br><br></a>

<a href="ssilki.html">Ссылки</a>

</td>

<td valign="top">На этой странице будут размещены ссылки на сайты, в которых размещены материалы по веб программированию и веб дизайну.

<a href="http://sevidi.narod.ru>Сайт о сайтах </a>

</td>
</tr>

</table>

</center> 

</body>

</html>

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

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

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

   Следующий заключительный урок о размещении сайта в интернете смотрите ЗДЕСЬ.

  
©Смирнов В.И. 2008

Hosted by uCoz