Как замаскировать партнерские ссылки |
Заработок в интернете на партнерских программах сегодня очень популярное направление у веб-мастеров и новичков. Действительно, ничего создавать не надо, бери готовенькие рекламные материалы и размещай в интернете. Но кто-то зарабатывает на партнерских программах очень солидные комиссионные, а кто-то не может совершить даже одну продажу!
На самом деле, заработок на партнерских программах целое направление, со множеством нюансов и подводных камней. И подходить к подобному способу монетизации интернета нужно на профессиональном уровне, если хотите зарабатывать много. Причем, наиболее эффективными являются платные способы.
|
Статистика посещений блога |
У всех начинающих блоггеров есть одна общая болезнь - наблюдать каждый час за счетчиком на блоге. Статистика посещений - важный фактор популярности любого виртуального проекта и необходимо добиваться ее роста. Но глупо ждать от молодого блога и тем более неопытного веб-мастера высокого показателя посещаемости ресурса.
Мы хотим, разместив на сайте десяток статей, видеть на нем много посетителей, но ни поисковые системы, ни тем паче пользователи интернета просто напросто не знают о существовании новоиспеченного блога. Ваша задача - рассказать максимальному числу пользователей о своем проекте. Как это сделать?
|
А КАК ТЫ ЗАРАБАТЫВАЕШЬ НА СВОЕМ ДНЕВНИКЕ |
Вопрос остается в силе - как ты уже зарабатываешь на своем дневнике? Я имею ввиду простые способы, доступные любому пользователю.Затрудняешься ответить? Так я подскажу варианты! Для всех видов предложенного ниже заработка существуют специальные биржи, которые помогают встретиться рекламодателю и блоггеру иначе владельцу дневника или веб-мастеру. На всех биржах необходимо регистрироваться. Ссылки на эти биржи я указала.
Если из перечисленного ты уже что-то делаешь, отлично, если нет, то есть замечательный шанс попробовать - дерзай!
Уже заметили, таблица не до конца заполнена, постепенно я её завершу.
Итак, на ЛИРУ можно заработать следующим образом.
|
РАЗМЕЩАТЬ ПОСТОВЫЕ - составил пост на любую (свою) тему, вставил в него 2-3 предложения с ссылкой по теме рекламодателя, повесил их у себя в дневнике навсегда и получил за это несколько рублей единоразово. |
http://www.blogocash.ru/?w=8254 биржа ссылок http://www.rotapost.ru/?a=nidopy биржа ссылок http://advert-control.ru/ethics.php биржа ссылок |
|
РАЗМЕЩАТЬ КРАТКИЙ ОБЗОР - пишешь пост про предмет рекламы на 0,5 - 1 стр., размещаешь в нем 1-2 ссылки и вывешиваешь у себя навсегда. Оплата единоразовая несколько десятков рублей. |
http://www.blogocash.ru/?w=8254 биржа ссылок http://www.rotapost.ru/?a=nidopy биржа ссылок http://advert-control.ru/ethics.php биржа ссылок |
|
РАЗМЕЩАТЬ ПОЛНЫЙ (ПОДРОБНЫЙ) ОБЗОР - пишешь пост про предмет рекламы на 1 - 2 стр., размещаешь в нем 2-3 ссылки и вывешиваешь у себя навсегда. Оплата единоразовая несколько десятков, а то и сотен (?) рублей. |
http://www.blogocash.ru/?w=8254 биржа ссылок http://www.rotapost.ru/?a=nidopy биржа ссылок http://advert-control.ru/ethics.phpбиржа ссылок |
|
РАЗМЕЩАТЬ ПРЕС-РЕЛИЗ - то есть, размещать материал (статью, ссылку, комментарий и прочее), подготовленные рекламодателем. Оплата разовая, а висеть навсегда. |
http://www.rotapost.ru/?a=nidopy биржа ссылок |
|
ПОКЛИКОВАЯ РЕКЛАМА - пишешь пост с учетом пожеланий рекламодателя и располагаешь в нем егошние ссылки. Оплату получаешь (копейки) за каждый клик по этим ссылкам, но пожизненно, до тех пор, пока они у тебя висят. |
http://hpivo.ru/p/23701/ биржа покликовых ссылок |
|
ПАРТРЕРСКИЕ ИЛИ РЕФЕРАЛЬНЫЕ ПРОГРАММЫ - пишешь пост и вставляешь в него ссылки, система подсчитывает сколько денег потратили (покупатели в интернет-магазине или рекламодатели) или заработали (блоггеры / веб-мастера), то есть, реальные клиенты приведенные тобой. Ты получаешь процент от того дохода системы, который она получила благодаря тебе. Что-то сложно написала. Короче суть - клиенты должны не только придти по твоим ссылкам, но и "купить" что-нибудь. Данные программы есть, например, у всех бирж, которые я здесь привожу, у интернет-магазинов и прочее... |
http://poznai-internet.ru/pp/olgagub интернет магазин одного обучающего диска http://info-dvd.ru/bbm/go/olgagub/a интернет-магазин обучающих дисков http://www.blogocash.ru/?w=8254 биржа ссылок http://www.rotapost.ru/?a=nidopy биржа ссылок http://www.linkfeed.ru/partnership биржа ссылок https://www.sape.ru/sites.php биржа ссылок http://hpivo.ru/register/23701/ биржа покликовых ссылок |
|
ПРОДАВАТЬ ССЫЛКИ НА СВОЕМ БЛОГЕ (вручную) - пишешь посты про что хочешь, сам вставляешь в эти посты по 2-3 предложения с ссылками от тех рекламодателей, которых ты сам выбрал. Содержание поста и ссылки могут не совпадать. Деньги получаешь "пожизненно", до тех пор, пока висят эти ссылки - по несколько копеек каждый день за каждую оформленную ссылку. |
https://www.sape.ru/sites.php биржа ссылок http://www.linkfeed.ru/partnership биржа ссылок |
|
ПРОДАВАТЬ ССЫЛКИ НА СВОЕМ БЛОГЕ (автоматически) - пишешь посты про что хочешь, а система сама вставляет в твои посты мини-рекламки с ссылками. Содержание поста и ссылки могут не совпадать. Деньги получаешь "пожизненно", до тех пор, пока висят эти ссылки - по несколько копеек каждый день за каждую оформленную ссылку. |
http://www.buypost.ru/ биржа ссылок https://www.sape.ru/sites.php биржа ссылок http://www.linkfeed.ru/partnership биржа ссылок |
|
УСТАНОВЛИВАТЬ БАННЕРЫ - вместо ссылок ставишь баннеры. Например так - смотри ниже. |
http://www.blogocash.ru/?w=8254 биржа ссылок http://www.rotapost.ru/?a=nidopy биржа ссылок http://www.linkfeed.ru/partnership биржа ссылок |
|
|
|
Кстати, не стесняйся, задавай вопросы по материалу написанному здесь. Пиши в комментариях или в личку. Буду рада помочь!
Серия сообщений "Заработать на LI.RU":
Часть 1 - КАК ЗАРАБОТАТЬ НА ЛИ.РУ.
Часть 2 - ОПТИМИЗАЦИЯ БЛОГУН НА ЛИРУ
...
Часть 28 - ЗАРАБОТАТЬ НА ЛИРУ. БЛОГОКЭШ. БИРЖА ЕСТЕСТВЕННЫХ ССЫЛОК. Blogocash
Часть 29 - ЗАРАБОТАТЬ В ЛИРУ НА ПАРТНЕРСКОЙ ПРОГРАММЕ
Часть 30 - А КАК ТЫ ЗАРАБАТЫВАЕШЬ НА СВОЕМ ДНЕВНИКЕ
Часть 31 - ЗАРАБОТАТЬ НА ЛИРУ. СМИАР - БИРЖА ПОКЛИКОВЫХ ССЫЛОК
Часть 32 - ОПЯТЬ... КАК ЗАРАБОТАТЬ В ИНТЕРНЕТЕ, НА СВОЕМ БЛОГЕ И Т.П.
...
Часть 38 - ТЕПЕРЬ НЕЛЬЗЯ ЗАРАБАТЫВАТЬ НА ЛИРУ?
Часть 39 - КОСЯКИ С ЗАРАБОТКАМИ НА ЛИРУ
Часть 40 - Зарабатываем на своем дневнике
Серия сообщений "Как я осваивала ЛИРУ":
Часть 1 - КАК УВИДЕТЬ МЕЛКИЙ ИЛИ ПЛОХОЧИТАЕМЫЙ ТЕКСТ В ЧУЖОМ ДНЕВНИКЕ
Часть 2 - ПЕРВЫЙ ОТЧЕТ КАК ЖЕ Я ОСВАИВАЛА ЛИРУ
...
Часть 14 - ИНТЕРНЕТ. САМООБУЧЕНИЕ. ОСВОЙ ИНТЕРНЕТ НА 100 %
Часть 15 - ЗАРАБОТАТЬ В ЛИРУ НА ПАРТНЕРСКОЙ ПРОГРАММЕ
Часть 16 - А КАК ТЫ ЗАРАБАТЫВАЕШЬ НА СВОЕМ ДНЕВНИКЕ
Часть 17 - ЗАРАБОТАТЬ НА ЛИРУ. СМИАР - БИРЖА ПОКЛИКОВЫХ ССЫЛОК
Часть 18 - ЛИРУ. БЛОГУН. Samsung. И ДАЖЕ ЗАРАБОТОК НА СВОЕМ БЛОГЕ ДЛЯ НОВИЧКА
Часть 19 - КАК ПРАВИЛЬНО НАЧАТЬ ВЕСТИ СВОЙ ДНЕВНИК, ЧТО БЫ ПОТОМ НИЧЕГО НЕ ПЕРЕДЕЛЫВАТЬ
|
Как заработать в интернете новичку |
"Как заработать в интернете новичку?"- вопрос, который задают миллионы пользователей, которые ежедневно приходят в интернет. Причем, бывает, что человек использует интернет для поиска информации или развлечений, но, наблюдая за другими пользователями, у него появляется желание извлекать из виртуального пространства деньги - ведь вокруг ВСЕ ЗАРАБАТЫВАЮТ! На самом деле, подавляющее большинство из всех лишь пытаются делать деньги онлайн, нахватавшись информации с сайтов по заработку. И лишь небольшое количество пользователей может похвастаться конкретными результатами.
Должен признаться, что практически не нашел в интернете четкого пошагового плана как заработать в интернете новичку. Везде дается описание различных способов заработка; говорится что такое хорошо, а что такое плохо; туда не ходи, сюда ходи - снег в башка попадет, совсем плохо будет и все в подобном стиле. И конечно же, куча различных коммерческих предложений о быстрых стартах и больших деньгах.
|
Как заработать в интернете без вложений |
«Заработать в интернете без вложений?! Бред, сказка, пирамида!!!»-воскликните вы. Но ведь я же смог! Инженер – строитель по образованию, человек, работающий в строительной компании, во время мирового кризиса 2008 года я был поставлен буквально на колени обстоятельствами. Не было денег на оплату квартиры, не было денег на оплату школы и садика для детей, не было денег даже на пакет молока, чтобы накормить своих детей!
Именно в этот период я залез в долги и набрал кредитов. Банки с огромным удовольствием кредитуют население под свои зверские проценты. Отдавать всегда сложно, ведь возвращаешь свои, а берешь чужие.
С 2008 года я пришел в интернет с одной единственной целью – поправить своё материальное положение, то есть заработать в интернете без вложений, так как собственно вкладывать то и было нечего.
|
Пассивный доход – займемся? |
Помните сказку про Емелю? Лежит он, значит, на печи и только пальчиками щелкает: "По щучьему велению, по моему хотению..." Бац! И последняя модель "Мерседес" под окном избушки стоит! Здорово, но это же сказка. Самое смешное, что чем дольше мы живем, тем больше сказок становятся былью. И заработок больших денег на автопилоте стал возможен благодаря тому, что все больше и больше источников пассивного дохода становятся доступны простым пользователям.
А вообще, что такое пассивный доход? Если вы один раз приложили усилия и совершили какие-либо действия однократно, а получаете после этого прибыль на постоянной основе в течение длительного времени, то значит вы создали источник пассивного дохода! Примером может служить любой запатентованный товар. Изобретатель создал изделие, оформил патент и получает пожизненно вознаграждение за использование своего ноу хау другими людьми.
|
Зачем нужен блог и как зарабатывать при помощи него |
|
Где деньги в интернете |
Гуру инфобизнеса постоянно нам твердят, что в интернете денег море, можно зарабатывать в интернете миллионы! А мы упорно задаем вопрос: "Где деньги в интернете?!" На самом деле, виртуальное пространство практически на 80% состоит из денег и они буквально лежат под ногами, но нужно ведь наклониться, чтобы взять эти самые деньги. И здесь начинаются трудности: лень, боязнь нового, неуверенность в своих силах, жалость к себе любимому, перекладывание на потом, панический страх что-либо менять - это все спутники новичков.
К сожалению, 95% новоиспеченных интернет предпринимателей и веб-мастеров (согласно статистике) не могут приодолеть эти тормоза на пути к успеху и достатку. Причины всегда стандартны: загруженность на постоянной работе, семейные обязанности, отсутствие свободного времени, усталость и тому подобное.
|
Заработок при помощи блога - подведем итоги |
|
Как заработать в интернете - неправильный вопрос! |
Итоги: заработок в интернете для новичков лучше начать с готовой и проверенной схемы:
- кто желает попробовать заработок на блоге и просто ощутить вкус электронных денег? Я всегда рад ответить на ваши вопросы.
- кто желает заняться более профессиональным делом и начать зарабатывать копирайтером рекомендую одного человека, нашего лирушного друга. Алека_69 находится на 8-ом месте в рейтинге известной биржи копирайтеров и может научить вас всему необходимому для заработка. Напишите ей в личку что вы хотите стать учеником.
- интересует заработок на файлообменниках? Рекомендую рубрику "Антикризисный марафон" от Делитанта. Тоже пишите ему в личку и спрашивайте, как стать учеником...
- Пожалуй хватит... ну и самый главный смысл этой заметки заключается в последнем предложении второго абзаца...
|
Леди онлайн. Как женщине строить бизнес в интернете. |
|
Есть ли деньги в интернете? |
|
Получать деньги ничего не делая и без первоначальных вложений?.. хм, а это как? |
|
Ваши позиции в поисковиках |
|
Конкурент блогуна? |
|
Где можно заработать в инете блоггеру. |
Биржи Блоггеров и Рекламодателей РунетаЗдесь представлен список бирж для блоггеров и рекламодателей через которые можно разместить рекламный пост, постовой или комментарий со ссылкой. - Биржа рекламодателей и блоггеров. Размещение постовых и постов в блогах навсегда (платите единократно). Заработок для блоггера. Рекламируйте свои услуги и товары на других блогах с прямой ссылкой на свой ресурс. - Биржа от создателей системы . Позиционируется как главный конкурент Блогуна. Главным преимуществом биржи является модерация и ручной тщательный отбор рекламных площадок, что должно существенно облегчить работу оптимизаторов по простановке ссылок на качественных ресурсах и дать возможность владельцам качественных блогов хорошо заработать. - Рекламная сеть для продвижения товаров и услуг в блогах при помощи рекламных постов и постовых. Хорошая возможность для монетизации собственного блога. Проект разработчиков известной современной баннерной сети . - Биржа вечных ссылок. Одним из вариантов размещения ссылок являются постовые, что прекрасно подходит для монетизации блогов. Оптимизатор же сможет за счет этой биржи получить большое количество вечных ссылок на свой сайт за короткий промежуток времени. |
|
Полезности для ведения интернет коммерции |
|
Как разместить сайт в интернете. |
Для того, чтобы ваш сайт "увидел весь мир" его необходимо разместить на хостинге, т.е. на сервере который предоставляет услуги по размещению и хранению ваших файлов. Хостинги бывают платные и бесплатные.
Как правило, хостеры за некоторую ежемесячную плату (от 3$/мес) предоставляют вам часть своего дискового пространства (например, 500Mb), куда вы и складываете свои файлы. Они поддерживают разные технологии, которыми вы можете пользоваться (PHP, MySql и прочее) и обеспечивают присутствие вашего сайта в интернете 24 часа в сутки.
Перед тем, как заключить договор о хостинге необходимо купить доменное имя (название вашего сайта, в нашем примере - это mysite). Доменное имя можно приобрести и у хостера (его стоимость порядка 600 руб за год).
Единственный недостаток платного хостинга - его платность.
Существует много сервисов по бесплатному размещению сайтов, Делают они это за счет средств, получаемых от рекламодателей, разместивших рекламу на ваших страницах (отсюда и первый минус - прибыль от размещения рекламы вы не получите и выбирать, какую рекламу размещать не сможете).
Кроме того, в основном вы не сможете пользоваться PHP, java и другими серверными технологиями. Зато, не надо покупать доменное имя и платить за хостинг.
Выбор остается за вами. Я предпочитаю платные хостинги, например, www.gudzonhost.ru. Но для начала, пока вы только обживаетесь в мире сайтостроения, подойдет и бесплатный.
Для примера, поместим наш сайт mysite на бесплатном сервисе www.newmail.ru.
Шаг 1.
Для начала нужно зарегистрироваться:
Жмем на "регистрация", появится вот такая форма:
Заполняем форму:
- ФИО заполните свои,
- в поле выбор адреса укажите желаемый адрес сайта (он будет отображаться в адресной строке) и нажмите "Проверить сейчас". Если такой адрес занят, вам предложат альтернативный. Например, хотелось иметь адрес mysite.nm.ru, но он оказался занят и пришлось выбрать mysite1@pochta.ru
- установите пароль и введите контрольные буквы.
- жмем "Зарегистрировать".
Следующая форма попросит ввести контрольный вопрос, альтернативный e-mail и т.д. Заполняем и снова жмем "Зарегистрировать".
Перед нами обыкновенный почтовый ящик, но есть строчка "Адрес вашего сайта", а наверху (на синем фоне) пункт - Мой сайт.
Шаг 2.
Щелкаем по "Мой сайт" и попадаем в окно загрузки файлов.
Загружать будем следующим образом:
- через поле Файл загрузим по одной наши страницы,
- а папку с картинками сначала заархивируем (правой кнопкой мыши щелкните по папке images, в раскрывающемся меню выберите "Add to images.rar"). Теперь в поле архив выберем наш архив images.rar
По завершению загрузки в разделе список файлов у нас появится следующее:
Обратите внимание, у нас есть страница index.html - она создана сервисом и страница 0_index.html - это наша страница. Нам нужно удалить страницу, созданную сервисом, а нашу переименовать, как index.html. Поэтому напротив страницы index.html щелкаем по красному крестику (удалить), затем щелкаем по ab (переименовать) напротив страницы 0_index.html и стираем 0_.
Шаг 3.
Осталось посмотреть на наш сайт в интернете. Для этого придется подождать около 4 часов, а затем набрать в адресной строке браузера адрес вашего сайта (в моем случае - это http://mysite1.pochta.ru).
Следует иметь в виду, что бесплатные службы не гарантируют бесперебойной работы, поэтому иногда доступ к вашему сайту может отсутствовать.
Также, по необъяснимым причинами, иногда случаются различные "глюки".
Например, если вместо картинок вы увидите крестики (что означает невозможность найти картинку), то придется схитрить. Удалите все, что мы загрузили. Затем загрузите все картинки так же, как страницы (т.е по одной), а на всех страницах (в тех местах где прописаны пути к ним) поменяйте "images/имя.jpg" на "имя.jpg" и загрузите их заново. Кстати, на платных хостингах таких глюков не встречается.
Вот серия наших уроков и подошла к концу. Теперь вы знаете, как сделать простой сайт и разместить его в интернете. Согласитесь, что это совсем не сложно. Пробуйте, продолжайте учиться и развивайте свои проекты. Удачи Вам!
* дата публикации этой статьи 05.05.2009. На момент, когда вы будете размещать свой сайт, формы регистрации могут измениться, но суть останется той же.
Серия сообщений "О своих сайтах":Часть 1 - как получить миллион посетителей на свой сайт бесплатно?!
Часть 2 - Где можно создать бесплатно сайт, блог и т.д.?
...
Часть 15 - Располагаем элементы на странице.
Часть 16 - Соединяем html-страницы между собой
Часть 17 - Как разместить сайт в интернете.
Часть 18 - 100 инструментов для Вэб-мастера
Часть 19 - Ваши позиции в поисковиках
...
Часть 33 - Как раскрутить сайт бесплатно. Окончание.
Часть 34 - Как разместить сайт в интернете на бесплатном хостинге
Часть 35 - Как создать свой автономный блог за 5 минут ?Сможет каждый!
|
Соединяем html-страницы между собой |
Итак, у нас есть три html-страницы, которые нужно связать между собой. В HTML для этого используются теги <a> </a>. Все, что вы поместите внутрь этих тегов (текст или картинку) станет ссылкой. Это значит, что после нажатия на то, что вы указали в тегах <a> </a> произойдет переход. Куда? На страницу, которая указана в атрибуте href.
Шаг 1.
Рассмотрим наш блок меню:
Нам необходимо, чтобы при нажатии на слово "главная" открывалась страница index.html, при клике по "шаблоны" - html-страница pattern.html, а при клике по "контакты" - html-страница contact.html. Внесем соответствующие изменения в эту часть кода:
Обратите внимание, наши ссылки стали синего цвета - это цвет ссылок по умолчанию. Но мы же помещали их в теги<font> </font>? Это тот самый случай, когда порядок вложенности тегов играет большую роль. Чтобы ссылки снова стали белыми, следует теги <font> </font> поместить в теги <a> </a>, и сделать это придется у всех трех ссылок.
Поменяйте код на вышеприведенный во всех трех html-страницах. Посмотрите на них в браузере, пощелкайте по ссылкам и убедитесь, что они стали белыми и в адресной строке с каждым переходом меняется адрес html-страницы.
Здесь следует подробнее остановиться на способах задания адреса html-страницы в атрибуте href. Все наши страницы находятся в одной папке, т.е. имеют один уровень. Поэтому мы просто указали имя html-страницы.
Если же html-страница будет находиться в другой папке, то необходимо будет указать путь к ней от данной html-страницы. Например, если в нашей папке site лежат страницы index.html и pattern.html, а страницу kontact.html мы поместили бы в папку kon, то указывая путь со страницы index.html на страницу kontact.html, мы написали бы следующее: <a href="kon/kontact.html"> (все папки указываются через / ).
Если вы захотите сделать ссылку на html-страницу, которая не лежит на вашем сайте, то придется указать ее абсолютный адрес, например,
<a href="http://www.mysite.ru/kon/kontact.html">
Шаг 2.
Нам осталось на разных html-страницах разместить разный контент.
Пусть на нашей главной странице будут размещены фотографии шаблонов с их краткими характеристиками, на странице pattern. html - будут просто фотографии шаблонов, а на странице kontact.html - адрес нашей электронной почты.
Начнем со страницы index.html. Откройте ее в блокноте.
Найдите в коде страницы ту часть кода, которая отвечает за контент. Сейчас там написано следующее:
Так как у нас здесь будут фотографии шаблонов и их описания, то удобнее всего поместить фотографии в одном столбце, а описания в другом. Для примера, возьмем два шаблона, а значит, наша таблица будет состоять из 2 строк и 2 столбцов (вы можете сделать сколько угодно). Итак, изменим эту часть следующим образом:
Теперь в первый столбец вставим фото шаблонов, а во второй - их описания. Для вставки фотографий в HTML существует тег <img>, он одиночный, т.е. его не нужно закрывать. Для того, чтобы указать какую именно картинку вставить у этого тега есть параметр src, в качестве значения которого указывается путь к картинке.
Страница index.html готова. Займемся страницей pattern.html. На ней мы решили просто разместить фотографии шаблонов.
Откройте ее в блокноте и вместо слов "Здесь - контент" вставьте заголовок, картинки и какой-нибудь текст, а чтобы все расположилось по центру в тег <td> добавьте атрибут align="center"
Теги <p></p> обозначают абзац (т.е. текст отделенный от остальных элементов отступами сверху и снизу).
Наконец, на странице kontact.html укажем наш e-mail. Сделаем это двумя равноправными способами:
Оставьте тот, который больше понравится (с тегами <address> </address>или без них).
Вот собственно и все. Пощелкайте по ссылкам и убедитесь, что все работает. Аналогичным образом вы можете сделать сколько угодно html-страниц и наполнить их разнообразным контентом. Рабочий пример можно посмотреть здесь.
Шаг 3.
Наверно, у вас возникло два вопроса:
1. Откуда брать картинки для сайта (все эти шапки и меню)?
Для этого ознакомьтесь с разделами графика для web, и уроки Photoshop
2. Что дальше?
Поэкспериментируйте с тегами и их атрибутами, которые вы узнали из этих уроков. Конечно, это лишь основы HTML, но для начала этого достаточно.
Далее, включайте на свои страницы и другие теги (их полный перечень с описанием и примерами приведен в разделеУроки html). Экспериментируйте, пока не освоитесь в мире HTML. Затем подключайте другие технологии - CSS, Java script, PHP и т.д.
На этом четвертый урок закончен. В следующем уроке вы научитесь размещать свой сайт в интернете.
Серия сообщений "О своих сайтах":Часть 1 - как получить миллион посетителей на свой сайт бесплатно?!
Часть 2 - Где можно создать бесплатно сайт, блог и т.д.?
...
Часть 14 - Оформляем html-страницу и форматируем текст.
Часть 15 - Располагаем элементы на странице.
Часть 16 - Соединяем html-страницы между собой
Часть 17 - Как разместить сайт в интернете.
Часть 18 - 100 инструментов для Вэб-мастера
...
Часть 33 - Как раскрутить сайт бесплатно. Окончание.
Часть 34 - Как разместить сайт в интернете на бесплатном хостинге
Часть 35 - Как создать свой автономный блог за 5 минут ?Сможет каждый!
|
Располагаем элементы на странице. |
В начале этого урока мы снова поговорим о структуре сайта. Связано это с тем, что сегодня мы будем вставлять картинки на нашу страницу и необходимо понять, где мы будем их хранить. Скоро вы убедитесь, что это важно.
Наш сайт сейчас состоит из одной html-страницы, сегодня к ней добавятся картинки, в следующем уроке - еще пару страниц. В принципе все это можно хранить в одной папке, но представьте, что этих страниц у вас стало много, и к каждой прилагается картинка, а то и не одна. Кроме того, развиваясь и обучаясь, вы можете захотеть использовать и другие web-технологии, например, css, javascript, php. Если все это складывать в одну папку, то вскоре вы и сами не разберетесь, что здесь к чему. Поэтому организуем сразу правильную структуру хранения для нашего сайта.
Шаг 1.
На любом диске вашего компьютера заведите папку и назовите ее, например site.
В этой папке создайте папку под названием images (здесь мы будем хранить картинки) и страницу index.html.
У вас должна получиться следующая структура:
Для начала нам этого достаточно. Имейте в виду, что все последующие примеры будут правильно работать именно для такой структуры папок. Если у вас они расположены по-другому, то вам придется кое-что менять в коде.
Шаг 2.
С помощью HTML можно осуществить верстку сайта двумя способами - табличным и блочным. В основе первого лежит таблица (теги <table> </table>), в основе второго - блоки (теги <div> </div>). Сегодня мы рассмотрим первый способ.
А делать мы будем вот такую страницу.
Давайте посмотрим из чего она состоит:
Вот мы и разделили нашу страницу на структурные элементы. Как известно, таблица состоит из строк и столбцов, образуя ячейки. Наша страничка, как видно из рисунка, состоит из 5 строк и 2 столбцов. Каждый элемент нашей страницы будет располагаться в своей ячейке таблицы.
Для продолжения вам понадобятся картинки, скачайте их здесь и положите в папку images, которую создали ранее (только картинки, а не папку с ними).
Теперь можно перенести все это в HTML.
Шаг 3.
Откройте в блокноте, созданную сегодня страничку index.html и наберите в ней (или скопируйте) основу html-страницы, т.е.
Теперь в теги <body> </body> вставим каркас таблицы, а именно
Здесь теги <table> </table> означают начало и конец таблицы, а теги <tr> </tr> - строки в ней. У нас 5 строк, а потому и 5 пары тегов строк.
Далее. У нас 2 столбца, за обозначение столбцов отвечают теги <td> </td> , но посмотрите на картинку, где их действительно два? Только в четвертой строке (где блок новостей и контент), в эту строку мы и поместим две пары тегов столбцов. А в остальных строках столбец один, как бы включающий в себя два. На такой случай у тега <td> есть атрибутcolspan, объединяющий столько столбцов, сколько необходимо. В нашем случае их 2, так и напишем colspan="2".
Теперь ваша страница должна выглядеть так.
Если сейчас вы посмотрите на нашу страничку в браузере, то увидите, что она очень маленькая. Это связано с тем, что у нашей таблицы нет размера, она меняется в зависимости от содержимого. Не очень удобно. Давайте зададим размеры. За это отвечают два атрибута: width - за ширину, height - за высоту.
Наша картинка шапки имеет размеры 780 Х 165, их мы и зададим для соответствующей ячейки. Строка меню должна иметь такую же ширину, а высоту - как у соответствующей картинки, т.е. 38. Ширина шапки блока новостей равна также 780, а высота - 33 (как у соответствующей картинки). Ширина блока новостей и контента должны в сумме давать те же 780 (отведем 200 на новости, а 580 - на контент), а высоту зададим 320 (просто для удобства). Строка низа сайта аналогична строке с меню, т.е. 780 Х 38.
Теперь самое время вставить вместо слов "Здесь будет шапка" саму картинку шапки и сделать так для всех осталных ячеек, но есть один нюанс. В остальных блоках мы собираемся что-то писать поверх картинок, т.е. наши картинки должны быть в них фоном. Для этого у столбцов существует атрибут background, в качестве значения которого мы и укажем соответствующие картинки.
Наши картинки лежит в папке images. Поэтому путь к ним будет выглядеть так: background="images/имя картинки". Если у вас другая структура хранения страниц и картинок, то вам следует указать ваш путь к картинке.
Наконец, у блока новостей и контента нет фоновых картинок, поэтому в них используем уже знакомый тег bgcolor, где укажем номер цвета.
Откройте страницу в браузере и посмотрите, что получилось.
Уже лучше, но есть недочеты, разберем их:
Теперь ваша страница должна выглядеть так.
Посмотрите на вашу страницу в браузере (кстати, делайте это после любых изменений в коде, это позволяет видеть результат и упрощает обнаружение ошибок). Уже все хорошо, вот только текст прижимается к левому краю, что не красиво.
Для того, чтобы это исправить, нам придется в каждой ячейке с текстом поместить еще по одной таблице. Да, в любой столбец можно вставлять другие таблицы и задавать им свои атрибуты. Это совсем не сложно, ведь все эти таблицы будут иметь одну строку и один столбец и одинаковые параметры отступов.
Структура этих таблиц будет следующая:
Параметру cellpadding можно присвоить разные значения для разных таблиц. Так для таблицы меню присвоимcellpadding="5", для таблицы блока меню - cellpadding="10", а для контента - cellpadding="15".
Окончательный код вашей страницы должен выглядеть так:
Снова посмотрите на свою страницу в браузере. То, что у нас получилось - это шаблон сайта. Ведь из страницы в страницу будет меняться только контент.
Шаг 4.
В нашем меню указанны названия трех страниц: главная, шаблоны и контакты. Главная - это наша index.html, с нее начинается загрузка вашего сайта. По умолчанию при наборе в адресной строке названия сайта среди всех страниц этого сайта ищется страница с названием index и загружается.
Создайте еще две страницы pattern.html и kontact.html, скопируйте в них код из index.html и сохраните в нашей папке site. В тегах <title></title> этих страниц напишите соответственно "шаблоны" и "контакты".
На этом третий урок закончен. В следующем уроке вы научитесь соединять наши страницы между собой и оформлять контент.
Серия сообщений "О своих сайтах":Часть 1 - как получить миллион посетителей на свой сайт бесплатно?!
Часть 2 - Где можно создать бесплатно сайт, блог и т.д.?
...
Часть 13 - Как устроен сайт. Делаем первую страницу.
Часть 14 - Оформляем html-страницу и форматируем текст.
Часть 15 - Располагаем элементы на странице.
Часть 16 - Соединяем html-страницы между собой
Часть 17 - Как разместить сайт в интернете.
...
Часть 33 - Как раскрутить сайт бесплатно. Окончание.
Часть 34 - Как разместить сайт в интернете на бесплатном хостинге
Часть 35 - Как создать свой автономный блог за 5 минут ?Сможет каждый!
|
