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

Записи с меткой «веб-мастерам»

Меню вертикальное делаем сами с помощью 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;}

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

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

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

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

Ну и конечно же zend_optimizer дает прекрасную возможность для работы с файлами, закодированными Zend-Guard.

Устанавливаем zend_optimizer на ДЕНВЕР, потому как многие веб-мастера сначала отлаживают весь механизм на локальном сервере, а обычно этим сервером является ДЕНВЕР, так как он самый распространенный и удобный в обращении.

1. Качаем архив zend3.3_files.zip
2. Содержимое архива каладем сюда usrlocalphp5 (папку с зендом и файлик)
3. В той же директории ищем файл php.ini и открываем его с помощью блокнота.
4. Крутим вниз до самого конца и после таких строк

; Local Variables:
; tab-width: 4
; End:

вставляем

[Zend]
zend_extension_ts = «/usr/local/php5/ZendExtensionManager.dll»
zend_extension_manager.optimizer_ts="/usr/local/php5/Optimizer-3.3.0/"
zend_optimizer.enable_loader = 1
zend_optimizer.optimization_level = 15

Сохраняем и перезапускаем сервер. Далее вбиваем в адресную строку localhost/Tests/PHP5/index.php5 и почти в самом начале наблюдаем

Если так, значит все ок, поздравляю Вас с успешной установкой зенда.

Если что-то вдруг не получается, пишите в аську, возможно помогу чем смогу.

Вот решил попробовать свои силы в блогуне и для этого соответственно придется данный ресурс добавить в сервис блогун. Добавлю я его с целью заработать денег с продажи вечных ссылок. На данный момент минимальная стоимость ссылки составляет 15 рублей и это я не говорю от ценах на трастовых ресурсах.
Конечно в том же блогуне из этого сайта можно сделать небольшой траст, заработать авторитет у яндекса (главное не потерять его :)) и гугла.
Так же необходимо наростить пузомерку для того, что бы повысить цену на продаваемые ссылки и возможно увеличить посещаемость блога, что не менее важно.

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