Gtalk.kz

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

Серия статей написана специально для Казахстанского форума о Joomla.

Теперь по урокам создания шаблона: что необходимо знать?

Внимание! Обратите внимание на дату публикации статьи, и взгляните на актуальную версию Joomla!

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

Также вы можете заказать дизайн и сверстать по мои урокам верстки сайта с нуля. А затем уже перейти к созданию непосредственно шаблона. Кстати, таким способом можно зарабатывать.  :neutral:

Хватит слов. Перейдем к структуре уроков. Серия уроков следующая:

1. Введение. Что есть, что в шаблоне?
   Структура шаблона joomla 2.5
2. Создание templateDetails.xml
3. Создание шаблона из html и установка
4. Добавление модулей
   Условия с позициями модулей
5. Добавление css. Готовый шаблон.
6. Фишки и плюшки
7. Полезные ссылки.

Последние пункты будут добавлять по мере необходимости. В общем, в 5 уроков должны уложиться.

Внимание! В данной серии уроков (5-ти), вы узнаете только азы создания шаблона по Joomla. Вам также необходимы знания и понимания верстки сайтов.

Наш будущий шаблон (зеленый :-)  ) выглядеть будет так:

Выбран этот html шаблон simplestyle_7 (посмотреть демо html шаблон):

• Используется html 5 как нам и нужно;
• Простота: обычный вывод статей с правым сайдбаром с оформленными модулями;
• Есть простая типография (страница Example)
• Лого и слоган можно сделать настраиваемыми.

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

Структура шаблона Joomla 2.5

Если вы уже знакомы со структурой шаблона Joomla 1.5,  то можно пропустить данный урок.

Важно знать, что в joomla есть два вида шаблонов:

• шаблон для сайта
• шаблон для административной части

Шаблоны для админки находятся по пути:

   site.kz/administrator/templates/название_шаблона/

Шаблоны для сайта находятся по пути:

   site.kz/templates/название_шаблона/

Название шаблона регистр зависимое. Мы с вами рассмотрим структуру шаблона для сайта joomla.

Общая минимальная (базовая) структура выглядит следующим образом:

css и images – это папки для отображения стилей и картинок соответственно. Их количество зависит от Вашей фантазии и дизайна сайта;

index.php основной файл шаблона – Главная страница сайта;

templateDetails.xml –  информационный файл – содержит данные о шаблоне, его авторе, всех файлов в шаблоне.

Но обычно структура простого шаблона такова.

Папка html для настройки красоты и структуры модулей, компонентов.

Файл favicon.ico для иконки сайта.

template_preview.png  и template_thumbnail.png – превью и картинка шаблона, для отображения в «Менеджере шаблонов» в админке Joomla. В версии 1.5 была только одна картинка.

Это основные/базовые файлы шаблона joomla 2.5. Конечно, есть и другие, но сейчас в этом нет необходимости. После базового курса рассмотрим все более углубленно.

Если у вас какие-нибудь предложения по данным урокам, можете отписаться в комментариях, либо в специально созданной ветке в теме форума joomlaforum.kz.

Надеюсь, информация была полезной для вас. Не забываем делиться с друзьями и подписываться на блог. :-?

Следующий урок 2

Скачать Html шаблон

с/у УтБ

Если вы делаете ремонт, то не забудьте пластиковые окна москва – отличное решение!

На десерт сегодня популярное видео интернета: “Ты кто такой, давай до свидания”:

И вот, наконец, для самых ленивых верстальщиков был придуман специальный плагин для Фотошопа, который конвертирует стили в css файл.

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

Отметим, что в коде используется css 3. Пример кода можно посмотреть здесь. (то что рисуют на видео).

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

Как установить плагин в Photoshop.

На видео видно как установить плагин. Немного прокомментирую с картинками.
1. Скачайте плагин, кликнув на главной страницы на кнопку Download for CS5, CS6 или Download for CS3, CS4 в зависимости от версии Фотошопа.
2. Запустите скаченный файл.
3. Принимайте условия.

4.  Проверте, что слева от названия стоит галочка, закройте приложение.

5. Откройте фотошоп, и активируйте плагин.
на Mac

на Windows

Как пользоваться плагином css3ps?

Очень просто. После активации появится окошко с логотипом css3ps. После создания элемента (например, квадрата с закругленными концами), выделите нужный слой (слой с квадратом с закругленными концами) и нажмите на иконку Css3ps. После этого откроется сайт с картинкой и стилем css к нему. Скопируйте и радуйтесь.

Внимание! Рисовать придется по четче и качественно. Не выдумывайте слишком сложное.

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

Если вам нужен дом, квартира, то возможность купить или продать недвижимость в Донецке без комиссии реальна.

На десерт видео в теме о плагине css3ps:

Итак, вы сделали сайт для заказчика, который хочет посмотреть статистику сайта на google analytics, либо какие-нибудь данные в google webmasters. Что вы можете сделать:

•          добавить пользователя (только просмотр)
•          добавить администратора (имеет полный доступ)

Итак, давайте научимся делать гостевой доступ к вашим данным определённым пользователям. Для этого необходим mail пользователя зарегистрированного в аккаунтах google. И, конечно, сайты, добавленные в сервисы google analytics и google  webmasters.

         Как дать гостевой доступ в Google analytics

Войдите в google analytics. В правом верхнем углу нажмите на кнопку Администратор.

Попав в раздел «Управление аккаунтами», войдите в свой аккаунт. Выберите вкладку «Пользователи». Здесь же вы можете затем удалить необходимого пользователя (кнопка «Удалить» находится справа от имени пользователя).

Нажмите на кнопку «Новый пользователь». Появится такое окно:

Введите адрес mail’a, кому хотите предоставить доступ. Выберите пользователь или администратор.

         Внимание! Администратор имеет полный доступ к вашим профилям аккаунта.

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

Как дать гостевой доступ в Google webmasters

Войдите в сервис от google и выберите  соответствующий сайт.

В меню выберите пункт «Пользователи».

Нажмите на кнопку «Добавить нового пользователя» (справа сверху). Появится всплывающее окошко:

Введите mail пользователя и выберите разрешение: ограниченный и расширенный доступ, аналогично как в google analytics.

Вот в принципе и все. Ничего сложного и всем удобно. :idea: Да, кстати, чтобы  начать пользоваться новыми возможностями пользователь должен войти под своими данными с тем mail’om с которым вы его зарегистрировали.

Надеюсь, информация была полезной. :???:

с/у УтБ

***

Прокат яхт в Крыму на любой вкус по ссылке http://rent-yacht.org/arenda/Crimea/

На десерт видео: мост на остров Русский. Видео от любителей. 8-)

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

Пользоваться данной программой могут как с операционной системой windows, так и те, кто сидит на Mac’e. Для остальных, к сожалению, пока (надеюсь) версий нету.

Очень интересно обыграна программа. Главный герой – Мистер Краб, который и «вырезает» нам с вами необходимые картинки.

         Что можно делать программой scrabber:

• Выделять область в экране и копировать на сервер, получая несколько вариантов ссылок на картинку
• Поделиться с друзьями, коллегами в соцсетях
• Готовые ссылки в версиях: прямая ссылка, html версия и bb код для форумов

Кому полезна программа:

• Всем, особенно работникам интернета. :smile: Удобно показывать баги, ошибки на сайте: выделил область, отправил ссылку.

Как начать пользоваться:

Зайдите на сайт и скачайте софт, нажав «поймать скраббер» для windows или mac.

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

Как пользоваться скраббером. Инструкция в картинках:

Минусы программы или чего не хватает

Лично мне не хватает в программе:

• Привязки к аккаунту (при смене компьютера или переустановки теряются все ваши картинки) :lol:
• Улучшить скорость отклика программы (иногда, скорее всего провайдер шалит)
• Возможность «вырезки» элементов при наведении, активных и т.д. (не знаю правда как это будет выглядеть)
• Возможность регулировать водный знак Scrabber.net (иногда на полкартинки или закрывает нужное), либо отключение данной функции  :-)

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

З.ы. На сайте scrabber.net, не забудьте кликнуть на дворника

З.ы.ы. А вы какой программой пользуетесь? Как вам такой софт?

с/у УтБ

***

Одну из «вырезанных» картинок можете добавить в красивую цифровую рамку для фотографий, либо фото своих родных и любимых.

На десерт социальная реклама для водителей. Очень неплохо придумано.

Сегодня мы поговорим о программе фотошоп, о том, как использовать его при верстке плюс маленькие хитрости, будем уменьшать время работы с данной программой. Ранее я писал в Урок 3. Верстка сайта: быстро вырезаем картинки в фотошопе, как делаю это я.

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

Не будет тянуть кота за хвост, и начнем, пожалуй :neutral:

Горячие клавиши Фотошопа.

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

Если Вам этого мало, то наберите в google горячие клавиши фотошопе и запоминайте их.

Необходимый набор.

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

Откройте фотошоп, создайте новый документ (ctrl + N), выберите размеры вашей превью картинки (у меня 200 на 200 пикселей), нажмите «Сохранить набор параметров…».

Теперь придумываем название: «200 пикс х 200 пикс», либо «Превью блога» и т.д. и жмите ok.

Теперь чтобы создать документ (ctrl + N) размеров 200 на 200 пикселей, мне достаточно выбрать соответствующий набор.

Расстояние и размеры элементов в фотошопе.

Есть несколько способов определения расстояния между блоками и блоков. Рассмотрим наиболее оптимальные.

Первый способ. Выбираем инструмент «Прямоугольная область» (М) и выделяем необходимый блок.  Смотрим во вкладку «Инфо» в Photoshop.

Таким же способом определяем расстояние между блоками.

Второй способ. Также расстояние можно измерить с помощью инструмента «Линейка». Не забывайте зажимать Shift для прямой линии линейки. Минус данного способа: необходимо определять ширину и высоту по отдельности.

Другие способы: Также можно выделить элемент, скопировать и при создании нового документа записать размеры. Узнать размер текущего документа можно в левом нижнем углу.

Цвет в фотошопе.

Узнать цвет очень просто.

Первый способ. Выбираете инструмент «Пипетка» и кликайте на необходимый элемент. В блоке «Инструменты»  появится выбранный цвет. Кликайте по квадрату с цветом.

И копируйте цвет в нужном формате.

Второй способ. С помощью специальных программ. Например, Pixie. Для этого необходимо навести на объект и записать нужный формат цвета.

Для текста. Можно использовать вышеописанные способы, но лучше активировать текст: выберите инструмент «Горизонтальный текст» (Т) и нажмите на текст, в блоке «Параметры» вы увидите цвет текста, а также другие параметры шрифт, размеры, жирность и т.д.

Рабочая среда в фотошопе.

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

Закройте все ненужные окна: нажмите на крестике соответствуюшего блока, либо Окно  ->Уберите галочку.

Нажмите на стрелочки в правом верхнем углу (показано на картинке) и выберите строку «Новая рабочая среда…». Придумайте название и сохраняйте. Теперь при щелчке на нужную среду будет изменяться настройки отображения блоков в фотошопе. Очень удобно.

Прозрачность слоев.

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

При сохранении непрозрачности слоя, я обычно создаю новый пустой слой и объединяю (ctrl +E) с необходимым. При этом сохраняются необходимые настройки слоя и растет КПД )).

Выбор необходимого слоя.

Для автоматического выбора слоя/элемента по которому вы кликаете необходимо сделать следующие действия в программе:

Установить галочку на «Автовыбор», и из выпадающего селекта «Группа слоев». Теперь по клику элемента в блоке «Слои» будет выделяться нужный вам слой.

Оптимизированное сохранение изображения

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

Запомните волшебную комбинацию: ctrl + shift +alt +s. Как бы длинно это не смотрелось, нажимается очень просто и легко. Конечно, вы можете переназначить данную функцию «Сохранить для Web и устройств».

Предварительный просмотр картинки у меня стоит на 4 вариантах. Одна область для исходного изображения, остальные можно поменять для gif, jpeg и png форматов. Посмотреть какой весить легче и при этом качество не теряется (для этого сравниваем с исходным изображением). Если в общем то png и gif для мелких и прозрачных элементов, для простых картинок можно jpeg в высоком или среднем качестве. Понажимайте и выберите, что получше.Если вас не устраивают размер, то вы тут же можете их поменять (справа внизу). При изменении непропорционально нажмите на значок справа от размеров.

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

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

с/у УтБ

***

Думаете над созданием собственного бизнеса? Магазин готовых бизнес планов предлагает свои услуги по разработке и знакомству с бизнес планами разных сфер.

На десерт сегодня девушка читает rap

Сегодня я покажу, как добавить кнопки в html редактор wordpress’a. Дабы увеличить скорость добавления необходимых тегов, и также, чтобы ваши статьи были красивыми и привлекали людей на сайт. Да, да мы превратим рутинную работу в несколько кликов.

Как всегда существует 2 способа:

• Добавить свои кнопки с помощью плагинов (Post Editor Buttons, HTML Editor Reloaded)
• Добавить свои кнопки в редактор вордпресса правкой файла

Интересно, что и у первого есть минус (я уже писал о том, что много плагинов – это зло) – нагрузка на wordpress из-за такой мелочи, и у второго – при обновлении вашего сайта настройки слетят.

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

Но прежде! Сохраняйте (делайте бекап) все редактируемые файлы.

Найдите файл quicktags.js в папке wp-includes/js. Сделайте копию файла.

Начинаем редактирование. В файле quicktags.js находим нечто подобное (в самом конце):

edButtons[10] = new qt.TagButton('strong','b','<strong>','</strong>','b');

Это код жирности текста. По такому принципу добавляем свой кусок кода.

edButtons[20] = new qt.TagButton('div','div','<div>','</div>','div');

Цифра изменяется в зависимости, куда вы вставите код. Если в конец, то 150, затем 160, 170 и т.д. Если в середину, то меняйте последующие цифры.

Если Вы не можете разобраться. Редактируйте файл quicktags.dev.js – неоптимизированный файл. В конце (строка 609) найдете соответствующие строки. Затем переименуйте файл quicktags.dev.js в quicktags.js, предваритеьно удалив последний.

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

с/у УтБ

***

Мебель торговая для магазинов – богатый выбор качественной мебели, а также изготовление на заказ.

***

На десерт сегодня видео как парень напугал свою девушку, наблюдаем на реакцию девушек ))

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

В связи с тем, что много вирусов «приходит» к нам с востока, то разработчики предусматривают безопасность как одну из приоритетных.

Внимание! Данная статья участвует в конкурсе «Золотой пост».

Конечно, все не может быть безоблачно. Одной из самых основных проблем это локализация. Мало кто понимает и способен перевести cms  на родной язык. Отсюда и слабая поддержка сообщества. Но китайские cms активно поддерживает сообщество chinascript.ru. За что им особое спасибо.

Давайте теперь рассмотрим небольшой обзор золотых cms для интернет коммерции.

Необходимые понятия:
B2B – Бизнес для Бизнеса (каталоги, электронные биржи, аукционы, электронные сообщества)
B2C – Бизнес для Потребителя (интернет магазин типа амазон)
C2C – Потребитель для Потребителя (типа молоток ру – сайт аукционов)
C2B – Потребитель для Бизнеса (потребитель устанавливает цену на товар, которые они хотят купить)

Многопользовательский магазин Brand V2.1  (B2C, C2C)– мощный многофункциональный интернет-магазин, который дает возможность создания сайта для каждого зарегистрированного пользователя. Хорошая сортировка товаров, открытый код, минимальная нагрузка на сервер, неограниченное вложение категорий, простота системы далеко не все достоинства данной системы.

Демо: http://brand.chinascript.ru

iWebShop (B2С) – доступная и простая система для создания интернет-магазина. Функционал способен создать простой частный магазинчик, который будет минимально нагружать ваш сервер. Минус отсутствует полная русская локализация.

Демо: http://shopdemo.jooyea.net

Официальный сайт: http://www.jooyea.net

ShopNC – многопользовательский интернет-магазин с большим функционалом. Уже шестая версия данной системы «говорит» о перспективе развития. Единственная проблема перевод на русский язык.

Официальный сайт: http://shopnc.net

ttTuangou v1.3.6 – Groupon – интернет-магазин для групповых покупок пользователей. Или проще аналог такого сайта как групон. Система работает в связке php + mysql. Распространяется бесплатно на китайском языке.

Демо: http://tg.tttuangou.net

iWebMall – система для интернет коммерции построена по принципу B2C (Бизнес для потребителей), т.е. каждый зарегистрированный пользователь выбирает быть ему продавцом или потребителем. Богатый функционал и русская локализация привлекают внимание к данной системе.

Демо: http://iwebmall.chinascript.ru

PHPOK3 – бесплатная система для создания корпоративных сайтов. Но функционал можно расширить до полноценного интернет – магазина. Использование сторонних модулей всегда можно настроить систему как вам необходимо. Язык – китайский.

Демо: http://www.phpok.com/cs-case.html

B2Bbuilder CMS – свободно распространяемая система для электронной коммерции. Можно использовать как B2B, B2C, C2C и быть успешным в своем бизнесе, то есть все зависит от вас. Плюс ко всему имеется 100% перевод на русский язык.

Демо: http://b2bbuilder.chinascript.ru

ECMall (С2С)- систем электронной коммерции (ECMall – многопользовательский магазин). Один из мощных, но для обычного интернет-магазина он вряд ли подойдет. Так как зарегистрированный пользователь может создавать свой магазинчик. Мощный фильтр и сортировки товара привлекут вас к данной системе.

Демо: http://ecmall.chinascript.ru/

ECShop V2.7.2 (B2C)– еще один бесплатный профессиональный интернет-магазин с открытым исходным кодом.

Сегодня давайте уже разберемся с азами блочной верстки окончательно. Надеюсь, Вы читали, что такое блочные элементы. В данной статье Вы узнаете, что такое встроенные элементы и встроенный блок. Конечно, вы могли слышать и другие названия: инлайновые, линейные и т.д. В английском варианте это  inline  и  inline-block  соответственно.

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

            «Встроенными называются такие элементы веб-страницы, которые являются непосредственной частью другого элемента, например, текстового абзаца. К встроенным элементам относятся теги <span>, <a>, <q>, <code> и др. В основном они используются для изменения вида текста или его логического выделения» htmlbook.ru

Давайте рассмотрим основные свойства встроенных элементов.

1. Встроенные элементы это все те элементы, которые не относятся к блочным, т.е это a, br, img, em, small, span, strong и т. д.
2. Встроенные элементы могут содержать:
   1. Только другие встроенные элементы (!) Нельзя вложить во встроенный элемент блочный (!)
   2. Разные данные (текст)
   3. Быть пустыми
3. Встроенные элементы выстраиваются друг за другом в одну линию (т.е. не переносятся на новую строку)
4. Можно использовать вертикальное выравнивание элементов (vertical-align)
5. Занимают ширину по их содержанию. (как узнать ширину блока мы говорили в уроке 2.1)

По умолчанию встроенные элементы имеют свойство display:inline; (его не нужно писАть в css), но ведь вам никто не запрещает сделать следующее:

span {display:block;}

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

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

Встроенный блок.

Сразу же рассмотрим его свойства.

1. В чистом виде не встречается, поэтому задается через стили свойством display:inline-block; (ie7 и ниже работает для встроенных элементов)
2. Внутрь встроенного блока можно помещать данные (например, текст), строчные и блочные элементы. (советую следовать логике использования вложений)
3. Можно выравнивать элементы по вертикали (vertical-align)
4. Имеют ширину по содержимому + границы и отступы. (как у блочных), высота рассчитывается исходя из содержимого.
5. Выстраиваются друг за другом в одну линию.
6. Можно задать ширину и высоту.

Что дают нам данные свойства? Во-первых, они фактически универсальны, во-вторых, нет необходимости использовать обтекание (float).

Рассмотрим пример, Интернет-магазин. Вывод товаров друг за дружкой блоками в один ряд. Если каждый товар с описанием выводить как блок (списком), то они не будут стоять в ряд. Посмотрим:

</pre>
<ul>
	<li><img src="images/1.jpg" alt="" /><a href="#">Товар</a></li>
	<li><img src="images/2.jpg" alt="" /><a href="#">Товар</a></li>
	<li><img src="images/3.jpg" alt="" /><a href="#">Товар</a></li>
</ul>
<pre>

Теперь добавим стиль display:inline-block; для ul li – для выравнивания списка. Посмотрите, что получилось. Вуаля, немного волшебства с css и товары будут выглядеть отлично.

В internet explorer 7 и ниже для блочных элементов display:inline-block; отображается не корректно. Поэтому добавим zoom:1; и выставим display:inline; для данных браузеров через условные комментарии:

<!--[if lte IE 7]>
<style type="text/css">
ul li {
display: inline;
zoom: 1;
}
</style>
<![endif]-->

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

с/у УтБ

***

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

***

Не знаю как вам, но такие флешмобы очень даже интересно смотреть

Инфографика – это визуальное представление информации. Сегодня инфографика довольно популярный метод представления информации, но сделать ее не так просто, хотя результат весьма интересен.

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

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

А для этого представляем вам 20 источников вдохновения.

Спонсор статьи: Интернет-магазин, где можно купить недорогие электронные трансформаторы.

pointlesscorp.com/

ipolecat.com/

golivebutton.com/

skillsfactory.in/

head2heart.us/

prowebdesign.ro/

ericbarse.com/

chappybarry.com/

amazeelabs.com/en

launchfactory.org/

scandalousdirt.com/

clayant.co.za/

bikingboss.com/

urbaneo.fr/

charlieprod.com/

lugin.pl/strona/

sleekdesignstudio.com/

jorgerigabert.com/

mintdigital.com/

melonfree.com/

источник

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

с/у УтБ

На десерт сегодня мощный байк из фильма “Трон”, как вам?

Блочная верстка – сегодня однозначно популярней табличной, о чем мы уже с Вами говорили в Уроке 2 Блочная верстка. Но как обычно есть всегда свои спецификации, которые должен знать и учитывать каждый начинающий html верстальщик в своем нелегком деле.

Давайте сегодня поговорим об особенностях блочных элементов.

Для начала выделим для себя три большие группы блоков (не учитывая блочную таблицу и ее производные):

• Блочные элементы (block)
• Строчные (встроенные) элементы (inline)
• Строчный (встроенный) блок (inline-block)

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

Блочные элементы – block.

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

Важно запомнить основные свойства для блочных элементов:

• Блочные элементы – это div, h1 – h6, p, blockquote, hr, pre, address, fieldset, <orm,  ol, table, ul (еще несколько не используемых/устаревших) + все те элементы которые имеет в свойствах display:block|list-item|table|run-in(не всегда);
• В блочные элементы можно вложить как блочные, так и строчные элементы;
• Блочные элементы занимают все доступное пространство;
• Высота рассчитывается исходя из содержимого блока;
• Ширина для блочных элементов есть: width + margin + padding + border (аналогично с высотой);
• Блочные элементы начинаются с новой строки;

В принципе, это основные свойства данных элементов, которые необходимо запомнить. Рассмотрим подробнее.

Вложенность

В блочные элементы можно вложить как блочные, так и строчные элементы:

Пример:

</pre>
<div>
<h1><a href="”#”"><span>Ссылка</span></a></h1>
</div>
<pre>

Т.е. в блочные элементы можно вложить бесконечное количество других элементов как блочных, так и строчных. Изменение стилей для других элементов (типа display:block;) не должно нарушать последовательность вложенности.

Нарушение вложенности типа <a href=”http://site.kz”><h2>ссылка</h2></a> приводит к невалидному коду и ошибке типа:

Пространство блочных элементов

Что значит все доступное пространство? Давайте рассмотрим пример:

</pre>
<div>
Текст</div>
<pre>

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

«Ширина блочного элемента есть все доступное пространство»

Объясняю: элемент абзаца (р) занял все пространство элемента div. Отсюда мы и не видим зеленый фон. По мере добавления текста блоки будут увеличиваться, а это есть одно из свойств элементов – высота рассчитывается исходя из содержимого блока.

Вот еще один пример для разбора:

</pre>
<div>
<h1>Текст</h1>
</div>
<pre>

Отступы у элемента абзаца (p) добавляются по умолчанию в браузере, для их удаления используйте сброс стилей css.

Ширина для блочных элементов

Как говорилось выше, ширина для блоков есть width + margin + padding + border;

На картинке все показано, что есть что.

Давайте посмотрим на исходный код примера:

</pre>
<div>
<div>Отступы у элемента абзаца (p) добавляются по умолчанию в браузере, для их удаления используйте сброс стилей css.</div>
</div>
<pre>

Давайте посчитаем ширину блока div. qwe:

width: 300px + border:5px; (граница проходит слева и справа! = 10px) + margin:10px 50px 10px 50px; (для ширины необходимы отступ слева и справа) + padding:5px 5px 5px 5px; = 420px;

Получается фактическая ширина блока div.qwe равна 420 px, что необходимо учитывать. Особенно когда делаете макет сайта.

C новой строки.

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

</pre>
<div>текст</div>
<h1>Текст</h1>
<pre>
текст

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

---

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

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

Если Вы ждете новых статей по верстке, то советую подписаться на обновления блога

На десерт сегодня матч 2010 года 11 человек против 200(!), в такой команде опасно забивать гол