Давайте рассмотрим некоторые важные возможности и преимущества этой программы:

• Весь код подсвечивается разными цветами в зависимости от типа, причем поддерживается также смешанный код, когда участок HTML будет подсвечен как HTML, PHP как PHP, а JavaScript как JavaScript в одном и том же файле. Существуют возможность выбора из нескольких цветовых схем, включая популярные IDE.
• Мощное авто-дополнения для HTML, PHP, CSS и JavaScript, включая HTML5 и CSS3. Для PHP полностью распознается структура проекта, а выпадает полный список методов в соответствующих местах.
• HTML/CSS инспектор по типу FireBug, который позволяет легко сопоставлять выделенные элементы страницы с кодом и соответствующим стилем.
• Контекстная помощь по всем поддерживаемым языкам. По нажатию клавиши F1 происходит открытия страницы с полным описанием текущего тега, аттрибута, функции и т.д. с соответствующих официальных сайтов.
• PHP дебаггер. PHP дебаггер позволяет пошагово выполнять PHP скрипты, отслеживая значения всех переменных в каждой строчке.
• SQL менеджер позволяет производить все необходимые действия с базой данных — добавлять, удалять, редактировать структуру и записи в таблицах, экспортировать данные, выполнять SQL запросы. Для SQL файлов работает подсветка и автодопленние.
• Поддержка FTP позволяет работать напрямую с удаленным сервером и делать все необходимые изменения. с предварительным просмотром результата;
• Опция портабле позволяет использовать редактор без предварительной установки.

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

Также существуют специальные плагины для работы с:

• CMS: Drupal, Joomla
• PHP фреймворками: CakePHP, CodeIgniter, Symfony, Yii, Laravel
• Движком для блогов WordPress
• JavaScript библиотекой JQuery
• Шаблонизатором Smarty, Twig

Материал подготовлен: codelobster.com

Запись Codelobster-Бесплатный PHP, HTML, CSS, JS редактор впервые появилась Hi-Blog.

Изначально Photoshop не был предназначен для web-дизайна, но он уже содержит инструменты прямо из «коробки». Такие как:

• Высокая надежность с несколькими неприятными «сюрпризами»
• Множество вариантов стайлинга для web-контента
• Хорошо подходит для HD web-дизайна благодаря легкости редактирования SVG и растровых изображений
• Полный набор функций, которые позволяют создать макет

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

Retinize It

Если вы ищите простой плагин, экспортирующий без дополнительных осложнений, то это Retinize It. Он позволяет нарезать и экспортировать слои или группы слоев, которые необходимы вам.

Codly

Одна из самых больших проблем проектирования в Photoshop является то, что в какой-то момент, позже необходимо программировать сайт. Codly дает возможность автоматического кодирования PSD проект в работоспособный мобильный дизайн для IOS, Android XML, Windows 10 и BlackBerry.

Duplllicator

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

Photoshop Prototyping Plugin

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

PSD Cleaner

Как и следует из названия, PSD Cleaner организует ваши PSD-файлы. Особенно полезно для переименования фалов и обнаружения пустых слоев. За $19,99 этот плагин покажет вам именно то что вам нужно исправить, экономя время на поиск самостоятельно.

GuideGuide

GuideGuide удерживает титул самого устанавливаемого расширения на Photoshop, и не зря. Плагин позволяет настроить направляющие, как вы хотите – на основе холста, монтажных областей, выбранных слоев и настроенных параметров.

Perspective Mockups

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

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

Suitcase Fusion

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

HTML Block

Еще один плагин для помощи с кодированием. HTML Block использует движок WebKit, чтобы сделать вашу работу в HTML и CSS, показывая результат в отдельном окне.

Renamy

Разработан специально для быстрого переименования, он делает одну вещь, но делает это хорошо. Плагин позволяет переименовать несколько слоев в один момент, хорошо экономит время перед экспортом.

Полная версия стоит порядка $14,99, а бесплатная демо-версия позволяет переименовать одновременно 5 слоев.

За предоставленный материал спасибо: sitepoint.com

Запись 10 Photoshop плагинов для Web-дизайнеров впервые появилась Hi-Blog.

Где прячется вирус gamezonenews …

Искал я причину достаточно долго. Проверял и антивирусом Avast, и Dr.Web CureIt задействовал (обычно он меня выручал), и AVZ. Прошерстил десятки форумов, и сайтов, но ответом там были только «Пришлите логи с AVZ» или «Скачайте вот такую непонятную программу, запустите ту функцию, а потом отправьте СМС туда и тд и тп» вообщем всё очень сомнительно.

В итоге полез самостоятельно искать причины. Он не прятался ни в папке пользователя, ни в корне системного диска, ни даже в автозапуске.

Чтобы его найти и удалить нужно:

1. Зайти в Управление компьютером — Правой кнопкой на Мой компьютер — Управление компьютером
2. Вкладка — Управление компьютером (локально) -> Служебные программы -> Планировщик заданий -> Библиотека планировщика заданий -> Microsoft
3. И в этом списке просмотрите подозрительные задания.

Для меня было подозрительно, что запускалась ссылка с неизвестным мне адресом в интернете. Вроде бы и не тот URL, но когда его запустил вручную в браузере, оказалось что он перенаправлял на gamezonenews .

После удаления этой задачи, перезапускаете компьютер и проверяете.

Надеюсь вам поможет данный совет, и вы сможете без особых проблем удалить gamezonenews.net

Запись Как удалить gamezonenews.net впервые появилась Hi-Blog.

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

1. Custom Login

Custom Login позволит вам изменить внешний вид страницы входа. Вы можете изменить все, начиная от логотипа вашего сайта, фона, цвета в формах, значках — и это всё с помощью плагина.

2. Login Security Solution

Login Security Solution добавляет уровень безопасности для входа вашего сайта. Например  он способен блокировать брутфорс атаку по словарю, а так же проверки надежности на сайте. Позволяет настроить выход пользователя из сессии, если он не предпринимает никаких действий на сайте.

3. Uber Login Logo

Uber Login Logo упрощает процесс установки своего логотипа на экране входа на сайт. Этот плагин подойдет если вы не хотите иметь дело со всеми ненужными вам функциями которые предлагают другие плагины.

4. zM Ajax Login & Register

zM Ajax Login & Register этот плагин позволяет создать модальное окно со вводом логина и пароля. Не нужно будет переходить на отдельную страницы Входа чтобы залогиниться или регистрироваться. Поддерживает вход с Facebook, проверка производиться с помощью AJAX.

5. Social Login

С Social Login пользователи могут зайти или зарегистрироваться, или оставить комментарии на вашем сайте с помощью аккаунтов социальных сетей. Плагин поддерживает более чем 25 социальных сетей, включая такие как: Facebook, Twitter, Google, GitHub, LinkedIn, Instagram, PayPal, OpenID и многие другие.

6. Erident Custom Login and Dashboard

Erident Custom Login and Dashboard будет полезен вам если вы хотите полностью кастомизировать страницу входа экрана панели администратора WordPress. Поддерживает настройке логотипа сайта и фона, цвета в формах и многое другое. А так же можете изменить текст нижнего колонтитула в панели администратора.

7. Custom Login Plugin

Custom Login Plugin дает возможность изменить стандартную страницу входа. Поддерживает слайдшоу, Google Fonts и поддерживает социальные(может брать аватары из ваших социальных сетей и устанавливать их аватарами на сайт).

8. Theme My Login

С Theme My Login поможет вам настроить страницу входа.Он создает отдельную страницу заместо «wp-login.php» из шаблона страницы вашей темы. Варианты настройки включают в себя аватары, пользовательские ссылки, сообщения электронной почты, профили пользователей и многое другое.

9. Google Apps Login

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

10. Move Login

Move Login изменит адрес входа с  www.example.com/wp-login.php на www.example.com/login и www.example.com/logout. Это позволит защититься от ботов с брутфорс атакой, если они настроены на стандартные адреса ввода пароля. Новый адрес необходимо запомнить!

11. Nice Login Widget

Данный плагин позволяет разместить виджет входа в любой области где присутствуют позиции в вашей теме WordPress. Обладает поддержкой AJAX, аутентификацию с поддержкой SSL, а так же имеется в наличии плагин WP-reCAPTCHA.

12. Captcha on Login

Ставит капчу на вход в систему, чтобы хакеры не смогли получить доступ к вашему сайту. Он помогает защитить сайт, а так же определить IP-адрес после определенного числа неудачных попыток входа.

13. Brute Force Login Protection

Защищает сайт от перебора паролей по словарю с помощью .htaccess. Он ограничивает число попыток входа, и запрещает входить в систему с IP-адреса если было произведено много число попыток.

Большое Спасибо сайту: http://www.hongkiat.com/

Запись 13 WordPress плагинов для защиты и оформления страницы входа впервые появилась Hi-Blog.

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

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

Alan Wake

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

Splinter Cell: Convictions

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

Remember Me

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

Max Payne 3

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

Grand Theft Auto IV

В первом ролике авторы и главные разработчики показываются рядом с героями. Но не мешая вести диалог.

Device 6

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

Tom Clancy’s Ghost Recon: Future Soldier

Как и в Splinter Cell, информация о целях миссии отражены в расширенной реальности в стиле Ghost Recon.

XIII

Игра имитирует внешний вид комиксов, показывая игру в уникальном стиле.

Devil May Cry

Все окружение в игре выставляется как живое. На стенах и полах высвечиваются призывы к действию например «Беги», «Опасность», «Смерть».

Far Cry 3

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

Type:Rider

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

Danganronpa: Trigger Happy Havoc

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

Call Of Duty: World At War

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

Deadpool

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

Psychonauts

В битве с одним из боссов, персонаж использует решающие слова, чтобы повредить проигрыватель.

Ultimate Marvel Vs. Capcom 3

Персонаж Феникс Рай на первый взгляд не подходит для файтинга, но в игре он rрича «Возражение!»наносит урон оппонентам.

Lollipop Chainsaw

Zed, один из боссов в игре, использует оскорбления, которые проявляются в качестве плавучих слов и вредят персонажу игрока.

Katawa Shoujo

В сцене, где герой получает список лекарств он должен принять, игра используется кинетическая типографика, чтобы подчеркнуть как запутанно герой чувствует себя.

Большое Спасибо: www.hongkiat.com

Запись Типографика в видеоиграх. 18 креативных примеров впервые появилась Hi-Blog.

После просмотра длинных статей, немного не удобно возвращаясь на верх страницы постоянно прокручивать. Есть множество разных плагинов для этой цели, но на мой взгляд WPFront Scroll Top самый удачный. Потому что поддерживает не только множество стандартных стрелок, но так же позволяет использовать свою картинку. Обо всем по порядку.

Общие настройки

Ну как это не логично, но для начала нужно его Включить. Поставив галочку.

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

Так же можно настроить скрытие кнопки, либо поставить так чтобы она постоянно висела. Но это уже полностью на ваше усмотрение.

Так же дополнительным плюсом к плагину будет поддержка мобильных устройств. А именно настройка размеров при отображении на мобильных устройствах. А это далеко не все плагины поддерживают.

Расположение

Настройки расположения — всё по человечески. двигайте кнопку куда хотите — в любой угол и с любыми отступами от краев.

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

Настройка картинки WPFront Scroll Top

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

Ну а если вам не понравились такие кнопки, то вы в любой момент можете загрузить свою картинку, либо настроить текстовую кнопку.

Запись Кнопка «Вверх» на WordPress — плагин WPFront Scroll Top впервые появилась Hi-Blog.

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

Редакторы HTML на Mac OS X

Ниже мы предоставляем вам подборку лучших бесплатных редакторов HTML для Mac OS X.

CotEditor 2.0

CotEditor является относительно новой и свежей разработкой, для тех кто не нуждается в редакторе каждой день, а просто хочет редактор с подсветкой синтаксиса. Можно представить CotEditor как Notepad++ для OS X. Он поддерживает разделение области редактирования, хороший поиск и замену функций, отличная подсветка синтаксиса для 40 языков программирования, и поставляется с восьми темами.

Для простого редактора, вы можете настроить приложение больше чем стандартные редакторы, а это стоит того чтобы попробовать его в действии.

http://coteditor.com/

Brackets

Brackets современный редактор с открытым исходным кодом с несколькими чрезвычайно интересными особенностями. Например, при использовании Adobe Creative Cloud Extract (пред-просмотр), вы можете увидеть части дизайна разрабатываемого проекта, такие как цвета, типы, истории и т.д. непосредственного из PSD файла и преобразовать с минимальными усилиями в правильный код CSS.

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

Пожалуйста помните: использование Adobe Creative Cloud требует платной подписки.

Еще одним преимуществом Brackets – дополнения, которые вы можете использовать чтобы настроить редактор для ваших нужд. Каждые 3-4 недели становятся доступны новые расширения.

Так же в Brackets вы можете использовать «быстрое редактирование» и «предварительный просмотр» при работе с LESS, а также SCSS файлами, что упрощает рабочий процесс. Вместе с этими и другими расширениями и Adobe Creative Cloud этот редактор может стать отличным инструментом для профессионалов.

http://brackets.io/

Sublime Text 2

Sublime Text 2 — минималистический фаворит среди разработчиков, потому что может с легкостью быть настроенный по потребностям используя JSON файл. Кроме того, есть множество расширений для «улучшения» редактора. В качестве примера полезных плагинов можно привести: Emmet (бывший Zen Coding – для быстрого кодирования), Sublime Linter (для поиска ошибок в исходном коде), Highlighter (для нахождения связанных скобок и тегов).

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

http://www.sublimetext.com/

Google Web Designer

Да, Google также предоставляет инструменты веб-дизайнеров. Тем не менее, Google Web Designer работает почти так же как Adobe Dreamweaver. Это не «чистый» редактор HTML, а сочетание WYSIWYG (what you see is what you get – что ты видишь то ты получишь) и текстового редактора. Вы можете работать с обоими интерфейсами, как с графическим, так и непосредственно с кодом.

Google Web Designer поддерживает «правильную» генерацию HTML5 и CSS3 кода с графическим интерфейсом. Правильность генерируемого кода зачастую зависит от количества элементов.

Google Web Designer

Aptana Studio 3

Aptana Studio является одним из самых известных и самых разносторонних средств разработок среди имеющихся. Это мощный инструмент, который поддерживается наиболее распространенные языки программирования и разметки, такие как: HTML (в том числе HTML5), CSS, JavaScript, PHP, Ruby.

Благодаря интеграции с Git, отладчик для Ruby и JavaScript, и встроенный терминал с возможностью для расширений. Aptana Studio создан практически для любых целей. Новейшие веб-стандарты, как правило поддерживаются.

Aptana Studio 3

Заключение

Некоторые из лучших редакторов HTML для Mac OS X бесплатны или доступны в качестве пробной версии без сроков. Sublime Text очень производителен и может быть настроен без особых проблем. А CotEditor может стать отличным инструментом для разработчиков которые только начинают осваивать программирование, или веб-разработку.

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

Большое спасибо http://www.noupe.com/

Запись 5 лучших HTML редакторов для веб-разработчиков на Mac OS X впервые появилась Hi-Blog.

Проблема такая: интернет по Wi-Fi подключен, а приложения, такие как YouTube, или Google Маркет, показывают будто нет подключения.

Android не видит интернет

У меня практически все девайсы на Android, такие как: Sony Xperia Sola, Sony Xperia M2, телевизор Sony Smart какой то там , планшет Asus, и относительно недавно взял планшет Sony Tablet Z3 Compact.

И в хаотичный момент подключение пропадало, а точнее Интернет. Wi-Fi раздавался с помощью роутера TP-Link-WR741ND.

В YouTube, Google не синхронизировал контакты, документы и тд, а так же в играх типа Angry Birds Apic, Clash of Clans. Постоянно выдавало – «Подключение отсутствует, проверьте настройки Интернет», ну и тому подобнее.

Прошерстил чуть ли не весь интернет, в поисках решения этой проблемы, многие сталкивались с такой проблемой. В основном советовали сменить канал, изменить его ширину, а также не выставлять автоматический режим работы беспроводной сети (802.11 b/g/n) и поставить на определенный, ну и тому подобное.

И так я мучался где-то полгода. Пока как-то не справился с этой проблемой. Далее я перечислю, основные способы решения данной проблемы, которые описаны в интернете, и того что мне помогло.

Решения проблемы

Выставить правильное время

В настройках – Дата и время, использовать в настройках Автомат.дата и время.

Как я прочитал, что якобы срабатывает какая-то защита в сервисах Google, и поэтому не дает доступа Интернет трафику в приложениях.

Результат: сразу не помогло, как бы я со временем не «игрался», но этот способ мне не помог.

Сменить режим работы беспроводной сети и канал.

Этот параметр выставляется в роутере. В web-интерфейсе того или иного роутера, есть настройка wi-fi сети. В моем домашнем роутере TP-Link-WR741ND этот параметр находиться в вкладке Беспроводной режим – Настройки беспроводного режима – Режим.

Здесь можно выбрать:

• Только 11b
• Только 11g
• Только 11n
• 11bg смешанный
• 11bgn смешанный

На этой же странице выставляется Ширина канала и собственно сам Канал.

Результат: на протяжении почти часа я перепробовал все варианты. И какой-то вариант, вроде бы помог, но через небольшое время Интернет опять стал «пропадать». В итоге вернул на 11bgn смешанный, Ширину канала и Канал – выставил на Авто.

Установить статический IP и DNS

Этот вариант мне предложил сделать, один мой хороший друг (Анна — Спасибо тебе Большое! )

Суть такова:

Роутер

В настройках роутера выставить резервирование адресов.

Узнать MAC адрес устройства. Это делается в настройках — об устройстве – Общая информация.

В настройках роутера в вкладке DHCP – Резервирование адресов, добавить наше устройство, введя MAC – адрес, и желаемый IP адрес для устройства.

Android девайс

Настройки – Wi-Fi выбираем точку доступа к которой хотим подключиться и настраиваем не DHCP, а статический адрес.

Ниже приведены мои настройки на планшете:

Как видите Параметры IP я выставил IP – 192.168.1.7.

Шлюз – 192.168.1.1 – это ip адрес нашего роутера.

Длина префикса – этот параметр я не менял.

DNS 1 – настроил на 8.8.8.8.

Сохранить.

Результат: после этой манипуляции, интернет сразу стал работать, во всех приложениях и сервисах. И вот две недели «полет – нормальный».

Заключение

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

Если у вас возникли какие либо вопросы, задавайте их в комментариях, или присылайте их на мою электронную почту: vian142@gmail.com.

Всегда буду рад Вам помочь!

Запись Что делать если Android не видит интернет впервые появилась Hi-Blog.

В этой статье я расскажу как сверстать такое меню для вашего сайта. А так же рассмотрим вариант как центрировать горизонтальное меню.

Итак, приступим.

Базовая разметка

Разметка нашей страницы с меню будет стандартной, и без излишеств. Единственное, чтобы наша страница не казалась пустой, я добавил стих Иосифа Бродского — Не выходи из комнаты.

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Простое горизонтальное меню</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
    <div id="wrapper">
        
        <nav>
            <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>
        </nav>
        
        <div id="middle">
            
            <div class="content">
              <hr>
               <h1>Иосиф Бродский - Не выходи из комнаты</h1>
                <p>Не выходи из комнаты, не совершай ошибку.</p>
                <p>Зачем тебе Солнце, если ты куришь Шипку?</p>
                <p>За дверью бессмысленно все, особенно - возглас счастья.</p>
                <p>Только в уборную - и сразу же возвращайся.</p>
                <br>
                <p>О, не выходи из комнаты, не вызывай мотора.</p>
                <p>Потому что пространство сделано из коридора</p>
                <p>и кончается счетчиком. А если войдет живая</p>
                <p>милка, пасть разевая, выгони не раздевая.</p>
                <br>
                <p>Не выходи из комнаты; считай, что тебя продуло.</p>
                <p>Что интересней на свете стены и стула?</p>
                <p>Зачем выходить оттуда, куда вернешься вечером</p>
                <p>таким же, каким ты был, тем более - изувеченным?</p>
                <br>
                <p>О, не выходи из комнаты. Танцуй, поймав, боссанову</p>
                <p>в пальто на голое тело, в туфлях на босу ногу.</p>
                <p>В прихожей пахнет капустой и мазью лыжной.</p>
                <p>Ты написал много букв; еще одна будет лишней.</p>
                <br>
                <p>Не выходи из комнаты. О, пускай только комната</p>
                <p>догадывается, как ты выглядишь. И вообще инкогнито</p>
                <p>эрго сум, как заметила форме в сердцах субстанция.</p>
                <p>Не выходи из комнаты! На улице, чай, не Франция.</p>
                <br>
                <p>Не будь дураком! Будь тем, чем другие не были.</p>
                <p>Не выходи из комнаты! То есть дай волю мебели,</p>
                <p>слейся лицом с обоями. Запрись и забаррикадируйся</p>
                <p>шкафом от хроноса, космоса, эроса, расы, вируса.</p>
                <hr>
            </div>
            
        </div>
        
    </div>
    
</body>
</html>

Как видите — абсолютно стандартная разметка меню. В итоге мы получаем:

Не особо видно, что это горизонтальное меню. Но мы конечно же добавим CSS к нашему меню.

Стилизуем меню с помощью CSS

nav{

}

nav ul{
    position: relative;
    margin: 0; /* Сбрасываем отступы */
    padding: 0;
}

nav ul li{
    position: relative;
    list-style: none; /* Убираем маркеры списка */
    float: left; /* Выравниваем пункты по горизонтали */
}

nav ul li a:link,
nav ul li a:visited{
    display: block;
    padding: 4px 8px;

    font-family: "Tahoma", "Arial", "times new roman", sans-serif;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.35);
    font-size: 14px;
    color: white;

    text-decoration: none; /*Убираем подчеркивание*/

    background: #4b91fc; /*Фон кнопки меню*/

    transition: all 0.2s ease; /*Параметры анимации при наведении*/
}


nav ul li a:hover,
nav ul li a:focus{

    background: white;
    color: #4b91fc;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);
}

К самым ключевым строчкам, в стилизации меню, я добавил комментарии, которые подробно рассказывают, что именно мы прописываем.

Единственно хочу добавить, главное что делает горизонтальное меню горизонтальным это строка float:left в контейнере nav>ul>li. Если не прописать это свойство то меню будет вертикальным.

В итоге у нас получается такой вид меню:

See the Pen menu_horizontal by Vian142 (@Vian142) on CodePen.

Горизонтальное меню написано. В принципе этого достаточно, но что нужно сделать, чтобы меню выравнивалось по центру страницы? Давайте рассмотрим такой вариант.

Выравниваем горизонтальное меню по центру

Общий принцип такой:

Сдвигаем содержимое списка ul с помощью свойств:

• float:left;
• left:50%;

Центрируем меню, сдвигая пункты li меню:

• left: -50%;

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

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

Итог

See the Pen horizontal_center_menu by Vian142 (@Vian142) on CodePen.

Как видите, написать меню, для простого сайта, не так уж и сложно. А центрировать его еще легче. Надеюсь вам пригодиться данный урок.

Запись Как сверстать простое горизонтальное меню на CSS впервые появилась Hi-Blog.

Главные изменения в Brackets 1.3

Особых и кардинальных изменений не было внесено, и существенно редактор не поменялся. Но всё-таки парочку прелестей было внесено. О них по порядку.

Code Folding

Представим такую ситуацию, у вас есть html документ на 500 строк, и вам нужно скрыть несколько блоков, чтобы они визуально не загромождали код, при редактировании.

Как видно из названия Code Folding скрывает код. При клике на стрелку в начале строки тега блока можно «свернуть» этот блок и все его содержимое. Просто и удобно в последующем редактировании.

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

Интеграция в командную строку.

Если в двух словах, то появилась возможность добавления в Проводник Windows, строки Open with Brackets. Раньше (в Windows) нам приходилось кликать на нужный нам файл, Открыть с помощью – Brackets.

Такая же функция добавлена и в Mac.

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

Думаю, эту функция нужна только если нужно будет отредактировать только отдельный файл.

Health Report

Тут всё просто – отправка анонимной информации для разработчиков. Для поддержания и улучшения редактора Brackets.

Включается во вкладке Помощь – Health Report. Там же можно и посмотреть какая информация передается. Например, версия редактора, какая ОС установлена, язык, установленные расширения и другие…

Не понимаю почему, не было этого раньше. Так бы было существенно меньше проблем. Но, как говориться – Лучше поздно чем никогда.

И в завершении…

Исправления

Исправлены известные баги, и улучшена стабильность работы.

Локализация

Обновились языковые пакеты для: бразильский, хорватский, фарси, финский, французский, немецкий, индонезийский, итальянский, японский, корейский.

Один из лучших редакторов обновился, и это не может не радовать. Интересно увидеть, что будет добавлено в следующей версии. Может быть добавят функцию перевода из PSD шаблона напрямую в Html/CSS.
Эх, мечтать не вредно …

Официальный сайт Brackets: http://brackets.io/

Запись Встречаем новую версию Brackets 1.3 впервые появилась Hi-Blog.