Создаем 2х-страничный сайт

Суббота, 02 Января 2010 г. 14:14 + в цитатник

Цитата сообщения FlashStudio

Прочитать целиком В свой цитатник или сообщество!

Создаем 2х-страничный сайт

Сегодня мы сделаем 2х страничный сайт...например, о заработке в интернете.

Сначала определимся как это будет приблизительно выглядеть.

Вверху сайта мы сделаем "шапку сайта". Слева будет меню сайта с ссылками на другие страницы сайта, остальное место будет занимать контент (содержимое ) сайта.

Идея понятна ? Приступаем.

Запускаем Блокнот и пишем наш минимальный набор для создания страницы.

<html>

</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>

</table>

Т.е. код нашей страницы будет вот такой :

<html>

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

</head>

<body>

<center>

<table>

</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 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 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 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 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 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 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">

Главная <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">

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

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

</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">

<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>

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

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

Возможно у кого то возник вопрос. А почему столько много пустых строк, нельзя ли уплотнить код ?

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

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

Метки: уроки

<a href="https://www.liveinternet.ru/users/3235494/post117740145/">РЎРѕР·РґР°РµРј 2С…-СЃС‚СЂР°РЅРёС‡РЅС‹Р№ СЃР°Р№С‚</a><br/>РЎРѕР·РґР°РµРј 2С…-СЃС‚СЂР°РЅРёС‡РЅС‹Р№ СЃР°Р№С‚

РЎРµРіРѕРґРЅСЏ РјС‹ СЃРґРµР»Р°РµРј 2С… СЃС‚СЂР°РЅРёС‡РЅС‹Р№ СЃР°Р№С‚...РЅР°РїСЂРёРјРµСЂ, Рѕ Р·Р°СЂР°Р±РѕС‚РєРµ РІ РёРЅС‚РµСЂРЅРµС‚Рµ.
РЎРЅР°С‡Р°Р»Р° РѕРїСЂРµРґРµР»РёРјСЃСЏ РєР°Рє СЌС‚Рѕ Р±СѓРґРµС‚ РїСЂРёР±Р»РёР·РёС‚РµР»СЊРЅРѕ РІС‹РіР»СЏРґРµС‚СЊ.
Р’РІРµСЂС…Сѓ СЃР°Р№С‚Р° РјС‹ СЃРґРµР»Р°РµРј &quot;С€Р°РїРєСѓ СЃР°Р№С‚Р°&quot;. РЎР»РµРІР° Р±СѓРґРµС‚ РјРµРЅСЋ СЃР°Р№С‚Р° СЃ СЃСЃС‹Р»РєР°РјРё РЅР° РґСЂСѓРіРёРµ СЃС‚СЂР°РЅРёС†С‹ СЃР°Р№С‚Р°, РѕСЃС‚Р°Р»СЊРЅРѕРµ РјРµСЃС‚Рѕ Р±СѓРґРµС‚ Р·Р°РЅРёРјР°С‚СЊ РєРѕРЅС‚РµРЅС‚ (СЃРѕРґРµСЂР¶РёРјРѕРµ ) СЃР°Р№С‚Р°.

РРґРµСЏ РїРѕРЅСЏС‚РЅР° ? РџСЂРёСЃС‚СѓРїР°РµРј. 
Р—Р°РїСѓСЃРєР°РµРј Р‘Р»РѕРєРЅРѕС‚ Рё РїРёС€РµРј РЅР°С€ РјРёРЅРёРјР°Р»СЊРЅС‹Р№ РЅР°Р±РѕСЂ РґР»СЏ СЃРѕР·РґР°РЅРёСЏ СЃС‚СЂР°РЅРёС†С‹.
&lt;html&gt;
&lt;head&gt;
&lt;title&gt; &lt;/title&gt;
&lt;/head&gt;
&nbsp;
&lt;body&gt;
&lt;/body&gt;
&lt;/html&gt;
РўРµРїРµСЂСЊ РЅР°РїРёС€РµРј РјРµР¶РґСѓ С‚РµРіР°РјРё &lt... <a href="https://www.liveinternet.ru/users/3235494/post117740145/">Р§РёС‚Р°С‚СЊ РґР°Р»РµРµ...</a>

Комментировать

« Пред. запись — К дневнику — След. запись »

Страницы: [1] [Новые]

LiveInternetLiveInternet

-Метки

-Рубрики

-Музыка

-

-Кнопки рейтинга «Яндекс.блоги»

-Я - фотограф

-Конвертер видеоссылок

-Поиск по дневнику

-Подписка по e-mail

-Статистика

Создаем 2х-страничный сайт