• Облако меток

Архив тега: html

Плагин WordPress для отображения кода на страницах

Январь 17, 2012   Александр Маврин   2 комментария

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

Плагин называется WP-Sintax. Это простой плагин без подсветки кода, но с нумерацией строк. Все содержимое кода заключается в специальный блок с рамкой. Для того, чтобы вывести на странице содержимое какого-либо кода, нужно переключить редактор в режим HTML и написать специальный код, в который и поместить содержимое.

Вот пример:

<html>
<head>
<title></title>
</head>
<body>
</body>
</html>

Все это содержимое заключается в блок pre и пишется так: угловая скобка pre lang=кавычкиLANGUAGEкавычки угловая скобка закрыта.Сюда вставляем код. угловая скобка pre угловая скобка закрыта.

По умолчанию фон блока белый и рамка серая в 1px. Но цвет фона можно поменять на тот, который вам нравится. Для этого нужно зайти в Плагины, найти WP-Sintax и нажать «Изменить». Открыть на редактирование файл wp-syntax/wp-syntax.css и третья строчка сверху это и есть фон блока. Я поставил так:

background-color: #ffc;

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

lang="LANGUAGE" line="1">

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

1
2
3
4
5
6
7

<html>
<head>
<title></title>
</head>
<body>
</body>
</html>

Популярность: 12% [?]

Читать полностью

Вертикальное меню для сайта

Октябрь 14, 2011   Александр Маврин   4 комментария

Всем привет! Недавно сконструировал простое, но симпатичное вертикальное меню для сайта. Возможно кому-то оно придется по вкусу или подойдет в качестве экспериментов по созданию сайтов. Меню состоит всего из двух картинок. Это фон и полоска, которая перемещается по пунктам меню. Вот они:

Фон менюМеню

Сложностей по внедрению меню на страницу возникнуть не должно. Можете внимательно посмотреть на код данной конструкции скачав все исходные файлы прямо сейчас по прямой ссылке. Удачных экспериментов.

Посмотреть демо 

Популярность: 36% [?]

Читать полностью

DigitalWeb — Красивый современный HTML шаблон для сайта

Октябрь 11, 2011   Александр Маврин   Комментариев нет

Добро пожаловать на SerBlog.ru. Делюсь еще одним качественным HTML шаблоном, который идеально подойдет для сайта дизайн-студии. Сайт выглядит очень эффектно и имеет в своем арсенале привлекательности  jQuery библиотеку в виде слайдера на главной странице. Кому нравится такой внешний вид сайта может смело добавить в него своего контента и загрузить все это на сервер. Получится довольно симпатично.Посмотреть демо



------
Полиция сайтов sitepolice.ru - сервис для проверки эффективности работы сайтов с целью повышения конверсии.

Популярность: 21% [?]

Читать полностью

mCube — красивый html шаблон для сайта

Октябрь 05, 2011   Александр Маврин   22 комментария

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

mCube – Тема отличается тем, что имеет слайдер на главной странице, который крутится в разные стороны. Слайдер сделан на Flash.

Посмотреть демо

Популярность: 23% [?]

Читать полностью

Горизонтальное CSS меню. Чистый код без картинок

Июнь 26, 2011   Александр Маврин

Привет всем читателям и странствующим  по интернету в поисках полезной информации. И специально для тех, кто увлекается созданием сайтов покажу пример простого CSS меню, которое сделано без какой-либо графики. Только чистый CSS код. Это горизонтальное меню css имеет следующие свойства: при наведении курсора на кнопку меню, меняется ее цвет и положение. Также меняется цвет и положение при нажатии на кнопку.

Такое меню является достаточно простым. Состоит оно из 2-х файлов: index.html к которому подключен style.css. Идеально подойдет для сайтов сверстанных на чистом html и css коде, что благотворно влияет на скорость загрузки страниц сайта. Также можно перейти на CSS меню сайтам, перегруженных графикой, чтобы снизить нагрузку на сервер и ускорить сайт в разы. Предлагаю Вам посмотреть демонстрационную версию меню и скачать исходные файлы CSS меню.

Посмотреть демо

Популярность: 13% [?]

Читать полностью
Страница 1 из 3123