Как я начал программировать

тел. +38 095 338 09 91

skype: djony_tovstik

Как сделать простое меню

Занимаясь разработкой сайтов, столкнулся со странным явлением. Вместо того что бы по человечески написать простую менюшку на html, люди зачем то используют какието левые модули. А потом начинаются проблемы, в плане то вирус на сайте, то стили меню начинают конфликтовать с другими менюшками

Ведь меню написать так просто. Для этого достаточно составить список пунктов "ul li"

Пример кода:


<ul class="list_menu">
	<li>Пункт меню 1</li>
	<li>Пункт меню 2</li>
	<li>Пункт меню 3</li>
</ul>

В итоге получим простой, не нумерованый список, такого вида:

  • Пункт меню 1
  • Пункт меню 2
  • Пункт меню 3

Для того что бы прописать вложенные пункты, достаточно в тег li вставить еще один список

В итоге код html будет выглядеть так:


<ul class="list_menu">
	<li>Пункт меню 1
		<ul>
			<li>Вложенный пункт 1</li>
		</ul>
	</li>	
	<li>Пункт меню 2</li>
	<li>Пункт меню 3</li>
</ul>

более подробно о списках можно прочитать здесь

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

<link href="сайт/путь к файлу/файл со стилями.css" rel="stylesheet" type="text/css">
Но есть возможность разместить их и непосредственно в документе. Для этого нужно прописать тег style и уже внутри тега прописать стили.

Для наглядности мы будем использовать тег style, но содержимое файла .css будет идентичным.

Для работы со стилями, необходимо изучить, что такое селекторы и как с ними работать. Мы в качестве селектора будем использовать класс list_menu. Первое что нам нужно сделать, это выстроить пункты меню в одну строку. Для этого к пунктам меню применяем свойство "display: inline;". Отступы регулируем с помощью свойства "padding". Фоновый цвет задаем свойством "background-color". Если нужно подсветить пункт меню, который находиться сейчас под указателем мышки, задаем другой цвет фона для псевдоселектора "hover"

В результате получим такие стили:

<style>
	.list_menu {
		background-color: #faebd6;
		padding: 10px;
	}
	.list_menu > li{
		display: inline;
		padding: 10px;
	}
	.list_menu > li:hover{
		background-color: #ffdc00;
	}
</style>

И наше меню будет выглядеть так:

  • Пункт меню 1
  • Пункт меню 2
  • Пункт меню 3

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

Первый опыт

Итак эпопея с программированием продолжается. За это время произошло довольно много изменений. В частности закончил учебу с php, сейчас осваиваю ООП. Не столько само ООП, а смысл его создания (не для резюме, а понять назначение и пользу от его приминения).

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

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

Но вернемся к нашей истории. Чем больше изучал php все больше внутри росло желание чего нибудь такое запрограммировать. Учебные задания казались какими то плоскими и хотелось испытать себя на практике. Сказано-сделано, как оказалось один мой товарищь занимался контекстной рекламой, а так как програм которые бы его устраивали небыло, заказал он мне сделать один сервис. Вот благодаря этому первому проекту появилась некоторая уверенность в своих силах. Но были и разочарования, допустим совсем не владел JS и производными вроде JQuery и т.д. В итоге с интерфейсом помучится пришлось нормально, правда потом позже уже переписал с учетом новых знаний, что зделало код более читаемым, да и скорость работы программы увеличилась.

Следующим этапом стало создание сайта http://metro-neft.ru. Благодаря этой работе освоил работу с Jooml'ой и версткой страниц, редактированием модулей и принципом работы с шаблонами для Joml'ы.

Ну и вдохновившысь результатами своих трудов, начал искать себе работу. Как оказалось это было не так и просто как казалось. Каждый рас требовалось буквально на ходу осваивать новые технологии. Благодаря тестовым заданиям освоил дополнительно OpenCart, Smarty. Получил не забываемый опыт по работе с JS. Собственно благодаря этому опыту и родился данный сайт.

Продолжение следует))

Начало

Итак, шел стремительный 2014 год, Украина разлагалась на части и начинала дурно пахнуть. В стране один за другим останавливались заводы, лопались банки. Гривна побила все мыслимые и немыслимые рекорды по падению. Население нищало просто на глазах. Предприниматели разорялись один за другим. Собственно говоря, и автор попал под этот "кризис", ремонт оргтехники и заправка картриджей уже не давала того дохода. И для того, чтобы совсем не помереть с голоду, было принято решение открыть интернет-магазин.

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

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

Следующим шагом стало изучение php. Это уже полноценный язык программирования, с функциями, константами, массивами и т.д. Кстати по началу, когда скачал шаблон интернет-магазина, никак не мог понять как его запустить. Все файлы в том числе и index были с расширением php. Так вот запускаются такие файлы через сервер, реальный или виртуальный (например можно поискать пакет Denver, он бесплатный и включает в себя все необходимое). Собственно и этот сайт – процесс обучения, что бы на практике усваивать полученные знания. На данный момент пройдены константы, понятие функций, арифметические и логические операции, работа с массивами данных, подключение сторонних файлов, циклы и блок сравнения.

Самое приятное в этом видеть, как открываешь посторонний файл и видеть что все больше понимаешь то что там написано. Это как реставрируешь фреску, по мере изучения предмета, открываются все новые детали и ваш сайт дополняется новыми красками.