|
Как создать свой сайт? Ещё лет пять-десять назад считалось, что иметь свой сайт - это модное и дорогое удовольствие. Сейчас с развитием IT технологий, с удешевлением серверов, интернета и прочего, иметь свой сайт может любой из нас. И только Вы решаете, что это будет - Ваша персональная страничка или блог, или полноценный сайт, фотогаллерея или даже социальная сеть. Мы рассмотрим как создать средний по сложности сайт, на котором Вы в дальнейшем можете размещать различную информацию. Итак, сначала представим, как будет выглядеть наш будущий проект. Популярное и универсальное оформление сайта состоит из:
1) "Шапки" сайта ("top" или "header" - верхняя часть сайта, на ней обычно размещают картинку - логотип сайта и его название или слоган)
2) Левая колонка меню - основная навигация по сайту, то есть основное меню будет распологаться именно там.
3) Область контента (содержимого), где будет Ваш основной текстово-графический материал, именно эта часть будет разной на разных страницах сайта. Например, на главной странице это будет описание Вашего проекта, приветствие посетителей или также свежие новости.
4) Правая колонка - здесь можно разместить какие нибудь графические баннеры или ссылки на релевантные (схожие или родственные) материалы или страницы.
5) Низ сайта - часто называется "footer" - здесь Ваш копирайт или другой текст. Можно разместить счетчики посещений. Открываем программу "блокнот" или другой простой текстовый редактор. Сразу обьясню некоторые понятия. HTML - язык на котором пишем сайт. Это не язык программирования, а разметка текста и прочего с помощью тегов.
CSS - таблицы стилей, файл, в котором описывается оформление элементов нашего сайта, таких, как ссылки, картинки, цвет фона и текста и прочее.
Тег - единица разметки теста и других элементов. Тег заключается в скобки, например <b>какой-то текст</b> - здесь тег <b> делает жирным текст, написанный внутри него. Большинство тегов - контейнерные, то есть их необходимо закрывать (открывающий тег - <b>, закрывающий - </b>) Начнём создавать сайт с главной страницы. Создайте текстовый файл (например, в блокноте) с именем "index" и расширением .html. Стартуем с "титлов" - это то название сайта/страницы, которое будет отображаться в заголовке Вашего браузера (просмотрщика интернет страниц). Пишем следующий код: <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Название вашего сайта</title>
</head> Тег <html> означает начало html кода, название сайта в заголовке браузера находится между тегами <title> </title> Название сайта готово, можно приступать к его верхней части - "шапки". Пишем : <body topmargin="0" leftmargin="0" bgcolor="#3E4886" link="white" vlink="white" alink="white" text=white> Здесь мы описали, отступы от краёв слева и справа (по нулям), затем цвет фона (bgcolor), цвет ссылки (link), цвет посещенной ссылки (vlink), цвет текста (text).
Поехали дальше : <div align="center">
<center>
<table border="0" cellpadding="0" cellspacing="0" width="100%" background="fon.gif">
<tr>
<td width="19%">
<IMG src="/logotip.jpg" mce_src="/logotip.jpg" WIDTH=207 HEIGHT=92></td>
</tr>
</table>
</center>
</div> Итак, шапка готова. Здесь выводится логотип (создайте файл-картинку с именем "logotip" и расширением .jpg размером 207 на 92 пикселей и поместите его в ту же папку, в которой у Вас лежат или будут лежать файлы - страницы Вашего сайта). В качестве фоновой картинки используется графический файл "fon.gif, этот файл Вы тоже создаете. К сведению, теги <tr> <td> и <table> описывают размеры областей под элемент и таблицы. Теперь продолжим создание нашего сайта. Сделаем левую колонку - меню, вся навигация по сайту будет здесь. <div align="center">
<center>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="11%" valign="top">
<div align="center">
<center>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="100%">
<a href="/index.html" mce_href="/index.html">Главная</a></td>
</tr>
<tr>
<td width="100%">
<a href="/1.html" mce_href="/1.html">Ссылка 1</a></td>
</tr>
<tr>
<td width="100%">
<a href="/2.html" mce_href="/2.html">Ссылка 2</a></td>
</tr>
<tr>
<td width="100%">
<a href="/3.html" mce_href="/3.html">Ссылка 3</a></td>
</tr>
<tr>
<td width="100%">
<a href="/4.html" mce_href="/4.html">Ссылка 4</a></td>
</tr>
<tr>
<td width="100%">
<a href="/5.html" mce_href="/5.html">Ссылка 5</a></td>
</tr>
<tr>
<td width="100%">
<a href="/5.html" mce_href="/5.html">Ссылка 6</a></td>
</tr>
<tr><center>
<td width="100%"><center>
<IMG src="/banner.jpg" mce_src="/banner.jpg" WIDTH=138 HEIGHT=131 border="0" alt="Наш баннер""></center></td>
</tr></center>
</table>
</center>
</div>
</td>
Теги <a href="/страница" mce_href="/страница">название ссылки</a> выводят ссылки на файлы, после них чтобы как-то заполнить сайт, мы выводим ещё один графический баннер (для этого создайте картинку размером 138 на 131 пиксель, назовите её "banner.jpg" и поместите в ту же папку, где лежат остальные файлы сайта.
Перейдем к средней части сайта - к области контента. Пишем следующий код : <td width="88%" valign="top">
<div align="center">
<center>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="100%" bgcolor="#000000">
<div align="center">
<center>
<table border="0" cellpadding="3" cellspacing="1" width="100%">
<tr>
<td width="81%" bgcolor="#0099CC">
<font size="2" face="Verdana" COLOR=BLACK><b>Мы приветствуем Вас на нашем сайте!<br><br> Здесь Вы много чего найдёте. Вас ждёт море картинок и прочего. Здесь надо заменить этот текст на Ваш текст, и заполнить форму содержимым. А пока что это будет бессмысленный текст. Просто отредактируйте текст, напишите, какая Вы хорошая или хороший, похвастайтесь, что у Вас есть сайт, расскажите о себе или Вашей фирме, в общем как можно больше всего напишите, чтобы не было пусто в середине сайта<br><br>
</font><p></td>
Теперь перейдём к правой колонке. Пусть там будут новости сайта или какое нибудь обьявление, а под ним небольшой баннер, или просто какой-нибудь блок (сделайте картинку с именем "banner2" и расширением .jpg размером 200 на 245 пикселей).
<td width="200" bgcolor="#3E4886">
<table width="200" border="0" cellspacing="0" cellpadding="1">
<tr>
<td bgcolor="#006699" align="center" valign="top"><b><font color="#FFFFFF" size="2" face="Arial, Helvetica, sans-serif">::
обьявления :: </font> </b>
<table width="100%" border="0" cellspacing="0" cellpadding="3">
<tr>
<td bgcolor="#0099CC">
<p><font face="Arial, Helvetica, sans-serif" size="1">Здесь очень важные обьявления! Скоро конец света! Такие вот дела! К концу света нужно успеть сделать сайт! И только тогда можно умереть спокойно!<br><br>Ура!</p><IMG src="/banner2.jpg" mce_src="/banner2.jpg" WIDTH=200 HEIGHT=245>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</tr>
</table>
</center>
</div>
</td>
</tr>
</table>
</center>
</div>
</td>
<td width="1%" valign="top"> </td>
</tr>
</table>
</center>
</div> Кстати, тег <br> в тексте обьявления осуществляет перенос текста на новую строку.
Теперь главная страница сайта почти готова, осталось дописать текст внизу страницы. Например, можно вставить следующий код, который будет являться Вашей благодарностью автору этой статьи за этот урок по созданию сайта. <div align="center">
<center>
<table border="0" cellpadding="0" cellspacing="0" width="100%" >
</table>Спасибо за помощь в создании этого сайта проекту<a target=_blank href="/http://nasha-feecha.ru">Наша фича</a> и в частности, автору Mav1.
</center>
</div> </body> </html>
Вот и всё! Главная страница сайта готова! Весь её код выглядит так :
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Название вашего сайта</title>
</head>
<body topmargin="0" leftmargin="0" bgcolor="#3E4886" link="white" vlink="white" alink="white" text=white>
<div align="center">
<center>
<table border="0" cellpadding="0" cellspacing="0" width="100%" background="fon.gif">
<tr>
<td width="19%">
<IMG src="/logotip.jpg" mce_src="/logotip.jpg" WIDTH=207 HEIGHT=92></td>
</tr>
</table>
</center>
</div>
<div align="center">
<center>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="11%" valign="top">
<div align="center">
<center>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="100%">
<a href="/index.html" mce_href="/index.html">Главная</a></td>
</tr>
<tr>
<td width="100%">
<a href="/1.html" mce_href="/1.html">Ссылка 1</a></td>
</tr>
<tr>
<td width="100%">
<a href="/2.html" mce_href="/2.html">Ссылка 2</a></td>
</tr>
<tr>
<td width="100%">
<a href="/3.html" mce_href="/3.html">Ссылка 3</a></td>
</tr>
<tr>
<td width="100%">
<a href="/4.html" mce_href="/4.html">Ссылка 4</a></td>
</tr>
<tr>
<td width="100%">
<a href="/5.html" mce_href="/5.html">Ссылка 5</a></td>
</tr>
<tr>
<td width="100%">
<a href="/5.html" mce_href="/5.html">Ссылка 6</a></td>
</tr>
<tr><center>
<td width="100%"><center>
<IMG src="/banner.jpg" mce_src="/banner.jpg" WIDTH=138 HEIGHT=131 border="0" alt="Наш баннер""></center></td>
</tr></center>
</table>
</center>
</div>
</td>
<td width="88%" valign="top">
<div align="center">
<center>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="100%" bgcolor="#000000">
<div align="center">
<center>
<table border="0" cellpadding="3" cellspacing="1" width="100%">
<tr>
<td width="81%" bgcolor="#0099CC">
<font size="2" face="Verdana" COLOR=BLACK><b>Мы приветствуем Вас на нашем сайте!<br><br> Здесь Вы много чего найдёте. Вас ждёт море картинок и прочего. Здесь надо заменить этот текст на Ваш текст, и заполнить форму содержимым. А пока что это будет бессмысленный текст. Просто отредактируйте текст, напишите, какая Вы хорошая или хороший, похвастайтесь, что у Вас есть сайт, расскажите о себе или Вашей фирме, в общем как можно больше всего напишите, чтобы не было пусто в середине сайта<br><br>
</font><p></td>
<td width="200" bgcolor="#3E4886">
<table width="200" border="0" cellspacing="0" cellpadding="1">
<tr>
<td bgcolor="#006699" align="center" valign="top"><b><font color="#FFFFFF" size="2" face="Arial, Helvetica, sans-serif">::
обьявления :: </font> </b>
<table width="100%" border="0" cellspacing="0" cellpadding="3">
<tr>
<td bgcolor="#0099CC">
<p><font face="Arial, Helvetica, sans-serif" size="1">Здесь очень важные обьявления! Скоро конец света! Такие вот дела! К концу света нужно успеть сделать сайт! И только тогда можно умереть спокойно!<br><br>Ура!</p><IMG src="/banner2.jpg" mce_src="/banner2.jpg" WIDTH=200 HEIGHT=245>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</tr>
</table>
</center>
</div>
</td>
</tr>
</table>
</center>
</div>
</td>
<td width="1%" valign="top"> </td>
</tr>
</table>
</center>
</div>
<div align="center">
<center>
<table border="0" cellpadding="0" cellspacing="0" width="100%" >
</table>Спасибо за помощь в создании этого сайта проекту<a target=_blank href="/http://nasha-feecha.ru">Наша фича</a> и в частности, автору Mav1.
</center>
</div>
</body>
</html> Теперь делайте остальные страницы, используя главную как шаблон, просто редактируя в ней текст. Помните, что ссылки должны правильно указывать на имена файлов, то есть имена остальных страниц должны быть в данном случае 1.html , 2.html и так далее. Создать свой сайт несложно, нужен творческий запал и свободное время. После того как сайт создан и пртестирован на Вашем компьютере, Вы можете залить его на сервер по ftp (читайте об этом в других статьях), и Ваш проект будет доступен всем пользователям интернета! Удачи! (с) Mav1 2009
|
Комментарии