| >>> Зарабатывайте до 30% в месяц Подробнее... |
Пример создания сайта.
Итак. Пришло время создать нечто более сложное, чем мы делали до этого, но используя полученные знания в предыдущих уроках.
В этом уроке курса MM часть 1 мы сделаем 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> </td>
<td> </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 ячейки.
Так. Теперь зададим размеры таблицы. Ширину таблицы сделаем 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
(т.е. наведите курсор мышки на картинку, нажмите правую кнопку мышки и выберите "Сохранить рисунок как..." )
Где брать такие шапки ? Рисовать самим. О том, как это делать, будет рассказано в книге MM часть 2.
Теперь вставляем картинку шапки в наш сайт. О том, как вставить картинку на сайте, мы разбирали здесь.
<html>
<head>
<title>Сайт о заработке в интернете. Информация и ссылки на сайты о заработке
в интернете</title>
</head>
<body>
<center>
<table width="750" height="600">
<tr>
<td colspan="2" bgcolor="#00CC99"><img
src="sitelogo.jpg" width="750" height="120"></td>
</tr>
<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 colspan="2" bgcolor="#00CC99"
width="750" height="120"><img src="sitelogo.jpg"
width="750" height="120"></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="120"><img src="sitelogo.jpg" width="750"
height="120"></td>
</tr>
<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 colspan="2" bgcolor="#00CC99" width="750"
height="120"><img src="sitelogo.jpg" width="750"
height="120"></td>
</tr>
<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 colspan="2" bgcolor="#00CC99" width="750"
height="120"><img src="sitelogo.jpg" width="750"
height="120"></td>
</tr>
<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 colspan="2" bgcolor="#00CC99" width="750"
height="120"><img src="sitelogo.jpg" width="750"
height="120"></td>
</tr>
<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">
<tr>
<td colspan="2" bgcolor="#00CC99" width="750"
height="120"><img src="sitelogo.jpg" width="750"
height="120"></td>
</tr>
<tr>
<td bgcolor="#CCCCCC" width="200" 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="750" height="600">
<tr>
<td colspan="2" bgcolor="#00CC99" width="750"
height="120"><img src="sitelogo.jpg" width="750"
height="120"></td>
</tr>
<tr>
<td bgcolor="#CCCCCC" width="200" 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="750" height="600">
<tr>
<td colspan="2" bgcolor="#00CC99" width="750"
height="120"><img src="sitelogo.jpg" width="750"
height="120"></td>
</tr>
<tr>
<td bgcolor="#CCCCCC" width="200" 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://moneymaster.ru">Сайт о заработке в интернете MoneyMaster</a>
</td>
</tr>
</table>
</center>
</body>
</html>
И сохраним... (Файл -> Сохранить)
Вторая страница сайта будет выглядеть ТАК.
Возможно, у кого-то возник вопрос. А почему столько много пустых строк, нельзя ли уплотнить код ?
Можно. Я сделал пропуски, чтобы было наглядней видно структуру страницы. А
так можно разместить весь код вообще в одну строчку 
Но не стоит. Иначе будет трудно искать ошибки, если что...
Если есть какие либо вопросы по этому примеру - пишите 
.
Вот мы и сделали простенький сайтик, который вы можете подредактировать и разместить в интернете.
Очень многие спрашивают, как разместить сайт в и нтернете, чтобы его можно было видеть не только на своем компьютере, а чтобы его могли видеть и другие люди. Ок. Забегу немного вперед.
Для того, чтобы ваш сайт был доступен из интернет всему миру, надо найти хостинг, который предоставит вам место для вашего сайта. Хостинг бывает бесплатный и платный. Бесплатный хостинг дает вам также и адрес сайта. Так например, если вы зарегистрировались на хостинге narod.ru, указав при регистрации логин pupkin, то адрес вашего сайта будет http://pupkin.narod.ru Но бесплатные хостинги обладают кучей недостатков и их следует использовать лишь для тренировки. Если же делать серьезный сайт, то надо покупать домен и покупать хостинг, затем связать домен и хостинг (подробнее эти вопросы рассматриваются в книге MoneyMaster-3), тогда ваш сайт будет иметь желаемый вами адрес типа http://gadukino.ru (если домен не занят), и вы получите еще кучу преимуществ по сравнению с бесплатным хостингом, например, возможность использовать скрипты, что позволит вам создавать динамические сайты. После того как вы определились с хостингом и получили место для вашего сайта, надо перебросить файлы сайта на хостинг. Сделать это можно с помощью специальных FTP- программ, например LeapFTP, CuteFTP, или можно сделать с помощью файловых оболочек Windows Commander, Total Commander и др. Вот здесь можете скачать видео-урок, из которого вы узнаете, как сделать переброску файлов на хостинг.
ПОЗДРАВЛЯЮ!
Если вы дошли до этого момента и у вас все получилось, значит, вы прошли своего рода тест-драйв и теперь с уверенностью можете двигаться дальше.
ЧТО ДАЛЬШЕ.
Конечно, сделанный для примера сайт не так крут. И даже в этом сайте пришлось использовать готовые картинки, которые вы скорей всего создавать не умеете.
А вы хотели бы научиться рисовать сами графический дизайн вашего сайта?
Этому вы можете научиться, пройдя обучение по книге MM-2.
|
Книга MM часть 2.
УЖЕ СЕГОДНЯ вы сможете сделать СВОЙ приличный, эксклюзивный дизайн для вашего сайта, не теряя недели/месяцы на изучение учебников и прочих материалов, не воруя дизайн у других и не используя темплейты. ДАЖЕ ЕСЛИ ВЫ В ПРИНЦИПЕ НЕ ДИЗАЙНЕР
- У ВАС ВСЕ РАВНО ПОЛУЧИТСЯ ПРИЛИЧНЫЙ ДИЗАЙН ! |
Узнайте КАК ! Подробнее...
К сожалению, книга 2 не бесплатная, но я уверен, что вы не пожалеете о ее покупке. Наверняка до прочтения книги MM-1 вы и представить не могли, что, изучив ее, вы научитесь создавать простенькие сайты. Скорей всего, вам это казалось чем то очень сложным, "не для вашего ума". Но я вас провел по самой короткой дорожке к результату, держа вас как ребенка за руку. Точно так же, изучив MM-2, вы научитесь делать графический дизайн сайта, при этом, опять же пройдя по самой короткой дорожке, т.е. СЭКОНОМИВ ВРЕМЯ, не тратя месяцы на изучение различных книг. Потратив несколько вечеров на изучение MM-2, вы будете в силах делать свой дизайн для своих сайтов, значительно обогнав тех, кто решит купить книги в обычном магазине и будет месяцами их изучать.
Цена на книгу MM-2 также включает в себя цену на консультации. Да.
Каждый покупатель получает право на консультации в соответствующих закрытых
разделах форума. Наверняка у вас будут появляться вопросы, а спросить некого.
Покупая книгу - вы всегда будете иметь возможность задать вопросы и получить
на них ответы от меня или от опытных учеников! При таком подходе ваше обучение
будет максимально эффективным! При таком подходе вы максимально быстро научитесь
делать сайты и зарабатывать с их помощью.
Если у вас совсем уж туго с финансами, то можете заработать необходимые деньги вот здесь. Много там не платят, но для кого-то это будет спасительной соломинкой, чтобы купить книги.
Читайте далее :
Финансовая подготовка 1. Электронные
платежные системы.
Финансовая подготовка 2. Кредитные
карты.