Я что-то плохонепонял

Архив рубрики «сайтостроение»

На данные момент в сети интернет это очень наболевшая тема. Как создать сайт в домашних условиях ине платить огромные деньги веб-студиям за не очень уж и сложную работу. Кто-то думает, что создание сайта это очень сложная процедура и никак не может решиться начать. Хотя стоит немного почитать основы, немного разобраться что к чему и вот, вас осенит и вы почувствуете, что способны на это, а потом осознаете простоту всего того, о чем думали, ассоциируя это с невозможностью. Я веду к тому, что создание сайта это вообще на данный момент не проблема. Начинается все с регистрации доменного имени, аренды хостинга и выбора тематики будущего ресурса. После всего этого заливаются файлы движка на хостинг и сайт наполняется контентом. Делов то на пару часов всего... или, ого! Или делов на пару лет Все зависит от ваших начальных знаний и желания. Но это конечно же как ни курти все равно не сложно.

А вот дальше начинаются проблемы намного сложнее, потому что созданный вами сайт начинает забирать у вас каждый месяц немного денег на аренду хостинга. И что бы вам не было в тяготу, вы как и все нормальные веб-мастера начинаете раскручивать свой сайт, для получения с него какой-то пользы в виде прибыли. И вот тут начинаются самые наболевшие вопросы. Тут уже кусочком знаний не обойтись, это точно. Как минимум необходим опыт в оптимизации сайта под поисковые системы и раскрутки.

Вот например у меня совсем недавно возникла такая мысль: если покупать ссылки в сапе на уже проиндексированных страницах яндексом, то беки всплывают не очень уж и быстро. Приходится порой ждать четыре или пять апдейтов, а то и вовсе намного больше. А если вот покупать ссылку в новом посте или новой написанной новости. Т.е. на странице, которую яндекс еще не проиндексировал. И соответственно после следующего апдейта, ну или через два, эта страница проиндексируется и соответсвенно ссылка тоже попадет в индекс и вылезет в беклинки. Хотя это только предположения.

Вернемся к тому, что для создания сайта не надо очень много знать. А вот уже для его раскрутки или привлечения посетителей, надо что-то почитать, изучить. Например очень мноо различной информации можно прочитать на форумах по данным тематикам. Там описываются не только способы, но и опыт, который веб-мастера получили продвигая и раскручивая свои сайты. Но при этомстоит помнить, что надо все это делать и самому, потому что у тысячи людей тысяча мнений и у вас скорее всего не хватит времени найти один из лучхив вариантов пробуя все способы поочереди.

На завершающей ноте хотел бы порекомендовать один ресур, который называется самой создать сайт. Этот ресурс конечно же не обязательно для женщин, потому что там вы сможете найти различные советы по созданию и оптимизации сайтов, по раскрутке и монетизации, а так же есть полезная информация для тех, кто по каким либо причинам не захотел или не смог создать свой сайт.

Меню вертикальное делаем сами с помощью css и уже знакомых нам методов работы с меню.

Очень часто или даже постоянно на сайтах используют вертикальные меню, так как они очень удобны, практичны и просты в создании. Вот и я решил написать в этой заметке урок по созданию вертикального меню, которое безотказно работает во многих браузерах. Когда вы научитесь создавать такие меню, то потом вполне очень быстро будете создавать совершенно другие, более сложные меню на основе этой, так сказать технологии.

Итак, для создания меню необходимо записать пункты меню в маркированный упорядоченный список вот таким образом:

<ul>
<li><a href="#">Партнеры</a></li>
<li><a href="#">Услуги</a></li>
<li><a href="#">Товары</a></li>
<li><a href="#">Люди</a></li>
<li><a href="#">Новости</a></li>
</ul>

Кстати сразу же сделаем наши пункты ссылками, иначе не сможем корректно прописать необходимые правила для нормальной работы меню. После всех этих мероприятий создаем файл стилей или добавляем прямо в код страницы правила для тега ul:

Обнуляем поля и отступы и скрываем квадратики не нумерованного списка перед пунктами меню.

ul {
margin:0;
padding:0;
list-style-type:none;}

Вообще -то предварительно необходимо нарисовать кое-какую картинку для имитации кнопки меню, но для первого раза можете воспользоваться моей.

Сразу хочу обратить внимание на то, что эта картинка в два раза больше по ширине, чем наше будущее меню. Сделано это для того, что бы изменять цвет кнопочки при наведении. Смотрим код css для ссылок меню, находящихся между тегами ul:

ul a {
display:block;
width:200px;
height:40px;
line-height:40px;
color:#000;
text-decoration:none;
text-indent:45px;
background-image:url (vert-menu-bg.gif);
background-repeat:no-repeat;}

Ширина 200 пикселей, высота 40 пикселей (ширина картинки 400 и высота 40), высоту строки так же устанавливаем 40 пикселей, цвет ссылки делаем черный и убираем подчеркивание. Согласно изображению стрелки на нашей кнопочке необходимо сделать отступ текста на 45 пикселей. Последние две строки добавляют нашу картинку бекграундом и запрещают ее повторение по икс и игрек.

Меню почти готово, осталось поработать над кодом, которые определяет правила при наведении курсора мышки на ссылку.

a:hover {
background-position:right;
color:#fff;}

Как видно код простейший. Первая строка определяет положение бекграунда начиная с правой стороны, тем самым при наведении куросра пункт меню подсвечивается зеленым цветом. Вторая строка определяет цвет наведенной ссылки. Поумолчанию она остается подчеркнутой.

Вот и все. Для создания вертикального меню теперь у Вас будет уходить не более 15 минут (зависит от Ваших способностей в фотошопе и фантазии). Самое главное изучить и понять оснуву, а дальше дело техники и полет фантазии. Например при наведении можно сделать сдивг текста на два пикселя вправо, чем симитировать «живое меню».

Недавно наш начальник решил устроить корпоративный вечер и как ни странно все это происходило на природе. Многие из нашей компашки задумались почему не в ресторане, а я совершенно случайно наткнулся на сайт проведение корпоративных праздников на природе и узнал наконец-то почему мы гуляли не как обычно в ресторане. С тех пор частенько отдыхаем на природе.

Для того, что бы сверстать горизонтальное меню средствами div+css, необходимо обладать некоторыми знаниями в данной области. В этот раз я Вам расскажу как это сделать и в очередной раз Вы пополните свою копилку ЗНУ (знания, навыки, умения).

Открываем любой визуальный редактор и переходим в режи отображения html кода. В новом, только что созданном документе создаем пункты будущего меню, которые должны выглядеть следующим образом(в режиме html):

<ul>
<li>главная</li>
<li>новости</li>
<li>скрипты</li>
<li>контакты</li>
<li>дизайн </li>
</ul>

Сразу же создаем в том же документе запись для работы со стилями css, которые будут определять положение и отображение меню. Вот тут будем записывать правила для тегов меню:

<style type="text/css">
<!--
/* hor menu */
тут запишем правила для тегов меню
/* end hor menu */
— >
</style>

Так как в меню мы в любом случае используем ссылки, то сразу их и пропишем. Должно получиться так — <li><a href="#">главная</a></li> такую процедуру проделываем для каждого пункта.

Задаем нулевые margin и padding для тега ul, ширину меню 300 пикселей и убираем квадратные точки слева. Для удобства добавим бекграунд:

ul {
margin:0;
padding:0;
width:300px;
list-style:none;
background:#FFFF99;}

А почему же наше горизонтально меню совсем не горизонтальное спросите Вы. А добавьте в конец списка правил для тега ul вот эту строку float:left; и создайте такое же правило для тегов li , которые находятся внутри тега ul. Это будет выглядеть так:

ul li {
float:left;}

Т.к. пост о создании горизонтального оменю получается очень объемным, я решил сначала выкладывать целиком список правил для какого-нибудь тега и потом их описывать.

ul a {
display:block;
margin:0;
padding:0 0.7em;
line-height:2.1em;
text-decoration:none;
color:#339966;}

Данный список определяет отображение ссылок, котрые заключены между тегами ul и первая строка в совокупности со второй, третьей и четвертой заставляют ссылку выглядеть кнопкой. Т.е. мы задаем отступы слева и справа от каждой надписи размером 0.7em, высоту строки определяем размером 2.1em, ссылку оставляем неподчеркнутой и окрашиваем в зелененький цвет. Так как мы использовали отступы. появилась необходимость немного увеличить ширину всего меню. Я сделал в данном случае 390 пикселей.

ul a:hover {
text-decoration:underline;
color:#33FF66;
margin-top:1px;}

Список правил для ссылки в момент наведения на нее курсора (обычно называют наведенная ссылка). Итак при наведении на ссылку она подчеркивается, окрашивается в светло-салатовый цвет и немного смещается вниз, что имитирует небольшую анимацию для Вашего меню. Если анимация не вписывается, то ее вполне можно исключить.

Ну вот и все, верстка горизонтального меню закончена. Если добавить еще немного воображения и фантазии, то можно чего-либо добавить или изменить по своему усмотрению. Например отрисовать в фотошопе кнопочки и добавить их как бекграунд. Так же еще хотел бы предложить вариант всплывающего меню для вашего сайта.

Как обычно делюсь полезными ресурсами в конце каждой заметки и на сегодня это сайт об автомобилях бмв в россии. Есть у меня желание купить машину, вот иногда и приходится заглядывать на подобные сайты.