WMSMS.ru - Пополнение WebMoney через SMS! Все виды текстовых услуг: копирайт, рерайт, магазин статей, наполнение сайтов, переводы, smo — Адвего Advego — общайся и зарабатывай деньги! Вирусный маркетинг, smo: десятки тысяч пользователей выполнят вашие рекламные заказы — Адвего Общайся на форумах и получай деньги - Advego.ru |
Пример создания сайта.
В этом уроке мы сделаем 2х страничный сайт...например, о заработке в интернете. Сначала определимся как это будет приблизительно выглядеть. Вверху сайта мы сделаем "шапку сайта". Слева будет меню сайта с ссылками на другие страницы сайта, остальное место будет занимать контент (содержимое ) сайта. Идея понятна ? Приступаем. Запускаем Блокнот и пишем наш минимальный набор для создания страницы. <html> <head> </head>
<body> </body> </html> Теперь напишем между тегами <title> </title> название нашей страницы, например вот так <html> <head> </head>
<body> </body> </html>
Далее разместим теги <center> и </center>, чтобы все
содержимое
нашего сайта было размещено по центру страницы. <html> <head> </head>
<body> <center>
</center> </body> </html> Для создания каркаса страницы мы будем использовать таблицу. Нам нужна таблица, в которой в первой строке будет 1 ячейка, а в другой строке будет 2 ячейки, т.е. вот такая нам нужна таблица :
В ячейке 1 мы расположим шапку сайта, в ячейке 2 будет меню сайта, а в ячейке 3 будет содержимое страницы. Для того чтобы сделать такую таблицу напишите вот такой код <table>
Т.е. код нашей страницы будет вот такой : <html> <head> </head>
<body> <center> <table>
</center> </body> </html> Теперь зададим размеры таблицы. Ширину таблицы сделаем 750 пикселей. Из рассчета что кто-то из посетителей сайта может использовать монитор 800х600 точек, и просматривать более широкий сайт ему будет не комфортно. Высоту таблицы сделаем 600 пикселей Т.е. код нашей страницы теперь будет вот такой. <html> <head> </head>
<body> <center> <table width="750" height="600">
</center>
</body> </html> Чтобы стало видно границы частей сайта - "зальем" область меню и область шапки цветом. Например вот так
<html> <head> </head>
<body> <center> <table width="750" height="600">
</center>
</body> </html> Сохраните файл под именем index.html , для того чтобы его можно было просмотреть как он будет выглядеть в браузере. Возможно возник вопрос. Почему назвали файл страницы именно так ? Есть правило. Главная страница сайта должна называться index.html, или index.htm . ! Или index.php если страница написана на языке PHP. Запомните это. Тогда при обращении к сайту, т.е. когда набираешь адрес сайта в браузере, можно не набирать index.html или index.htm, достаточно набрать адрес вашего сайта.
Теперь вставим шапку нашего сайта. Сохраните картинку шапки у себя на компьютере в той-же директории где находится файл страницы под ее "родным" именем sitelogo.jpg (т.е. наведите курсор мышки на картинку, нажмите правую кнопку мышки и выберите "Сохранить рисунок как..." )
Теперь вставляем картинку шапки в наш сайт.
<html> <head> </head>
<body> <center> <table width="750" height="600">
</center>
</body> </html>
Теперь установим точные размеры ячейки таблицы, предназначенной для шапки. Т.к. картинка шапки у нас имеет размер 750х120, то и размер ячейки таблицы сделаем 750 х 120.
<html> <head> </head>
<body> <center> <table width="750" height="600">
</center>
</body> </html>
Установим ширину меню равной 200 пикселей, для этого добавим width="200" в соответствующий тег <html> <head> </head>
<body> <center> <table width="750" height="600">
</center>
</body> </html> Задний план меню "зальем" вот таким фоном, для этого сохраните этот фон с его "родным" именем sv11.jpg в ту же директорию где находится файл страницы. А теперь прописываем нужный код
<html> <head> </head>
<body> <center> <table width="750" height="600">
</center>
</body> </html> У вас возможно возник вопрос, почему браузер не "отрабатывает" ширину меню 200 ? Меню ведь выглядит шире чем 200 пикселей. Да. Есть такой глюк браузера, но все встанет на свои места если начать писать текст в основном разделе страницы. (Или, можно задать жестко ширину ячейки в которой будет писать контент, дописав width="550") Чтобы подтвердить это, добавим текста на наш сайт. <html> <head> </head>
<body> <center> <table width="750" height="600">
</center>
</body> </html> Теперь все почти ОК...Почти, потому что на лицо небольшие проблемки. Текст отображается ровно посередине (по вертикали), а следовало бы чтобы текст был расположен вверху ячеек. Для этого нам надо прописать еще один параметр в теге <td> меню и основного содержимого страницы. это параметр выравнивания по вертикали valign="top".Значение top означает что содержимое будет располагаться вверху. <html> <head> </head>
<body> <center> <table width="750" height="600">
</center>
</body> </html>
Далее делаем меню. Пока наш сайт будет 2х-страничный. Главная страница и страница ссылок. Пункты меню пусть называются Главная и Ссылки. Для того, чтобы "сдвинуть" текст на следующую строчку - используем тег <br> Два <br> сдвинут текст на 2 строки и т.д. <html> <head> </head>
<body> <center> <table width="750" height="600">
Главная <br><br> Ссылки </td>
</center>
</body> </html>
Теперь надо сделать текст меню в виде ссылок. Слово Главная залинкуем на страницу index.html, а слово Ссылки на страницу ssilki.html, которую мы создадим чуть позже.
<html> <head> </head>
<body> <center> <table width="750" height="600">
<a href="index.html">Главная</a><br><br> <a href="ssilki.html">Ссылки</a> </td>
</center>
</body> </html>
Осталось сделать вторую страницу сайта. Для того, чтобы упростить работу сделаем так - сохраним нашу страницу index.html под другим именем ssilki.html, а затем подредактируем файл. Выбираем в блокноте команду Файл->Сохранить как... , выбираем ту же директорию где находится файл index.html, пишем имя страницы под которой мы хотим сохранить файл ssilki.html . жмем ОК. Т.е. на компьютере у вас должно быть 2 пока что одинаковых страницы - index.html и ssilki.html. Теперь изменим название страницы (между тегами <title> и </title>), и изменим текст страницы, например вот так <html> <head> </head>
<body> <center> <table width="750" height="600">
<a href="index.html">Главная</a><br><br> <a href="ssilki.html">Ссылки</a> </td> <a href="http://moneymaster.ru">Сайт о заработке в интернете MoneyMaster</a> </td>
</center>
</body> </html> И сохраним... (Файл -> Сохранить)
Возможно у кого то возник вопрос. А почему столько много пустых строк, нельзя ли уплотнить код ? Можно. Я сделал пропуски чтобы было наглядней видно структуру
страницы. А так
можно разместить весь код вообще в одну строчку
Вот мы и сделали простенький сайтик, который вы можете подредактировать и разместить в интернете. Очень многие спрашивают, как разместить сайт в интернете, чтобы его можно было видеть не только на своем компьютере, а чтобы его могли видеть и другие люди. Ок. Забегу немного вперед. Для того, чтобы ваш сайт был доступен из интернет всему миру, надо
найти хостинг,
который предоставит вам место для вашего сайта. Хостинг бывает
бесплатный и
платный. Бесплатный хостинг дает вам также и адрес сайта. Так например
если
вы зарегистрировались на хостинге narod.ru, указав при регистрации
логин pupkin,
то адрес вашего сайта будет http://pupkin.narod.ru Но бесплатные
хостинги обладают
кучей недостатков и их следует использовать лишь для тренировки. Если
же делать
серьезный сайт, то надо покупать домен
и покупать хостинг, затем связать домен и хостинг
, тогда ваш сайт будет иметь желаемый вами адрес
типа
http://gadukino.ru
(если домен не занят) и вы получите еще кучу преимуществ
по сравнению с бесплатным хостингом, например возможность использовать
скрипты,
что позволит вам создавать динамические сайты. После того как вы
определились
с хостингом и получили место для вашего сайта, надо перебросить файлы
сайта
на хостинг. Сделать это можно с помощью специальных FTP- программ,
например
LeapFTP, CuteFTP, или можно сделать с помощью файловых оболочек
Windows Commander,
Total Commander и др.
|
О заработке Зачем создавать сайт? Создание сайта Электронный счет Партнерские программы |