Плагин для Фотошопа, конвертирующий стили программы в код css

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

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

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

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

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

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

установка плагина фотошоп css3ps

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

установка плагина css3ps в photoshop

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


установка плагина css3ps в фотошоп для конвертации css кода

на Windows

photoshopcss3ps

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

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

плагин css3ps

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

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

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

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

Гостевой доступ в Google Analytics и Google Webmasters

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

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

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

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

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

google analytics гостевой доступ

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

google analytics как сделать гостевой доступ

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

гостевой доступ google analytics

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

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

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

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

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

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

google webmasters гостевой доступ

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

google webmasters гостевой доступ

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

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

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

с/у УтБ

***

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

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

Scrabber – онлайн инструмент создания скриншотов

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

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

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

scrabber онлайн инструмент для скриншотов

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

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

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

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

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

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

скраббер онлайн инструмент

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

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

scrabber инструкция по установке

скраббер онлайн инструмент установка

установка скарббера на компьютер

скраббер инструкция по установке

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

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

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

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

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

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

с/у УтБ

***

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

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

8 полезностей в Photoshop для быстрой верстки сайта

Сегодня мы поговорим о программе фотошоп, о том, как использовать его при верстке плюс маленькие хитрости, будем уменьшать время работы с данной программой. Ранее я писал в Урок 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 и устройств».

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

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

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

с/у УтБ

***

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

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

Как добавить свои кнопки в html-редактор WordPress’a

Сегодня я покажу, как добавить кнопки в 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, предваритеьно удалив последний.

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

с/у УтБ

***

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

***

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

10 золотых китайских cms для электронной коммерции

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

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

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

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

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

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

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

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

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

iWebShop

Демо: 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 (Бизнес для потребителей), т.е. каждый зарегистрированный пользователь выбирает быть ему продавцом или потребителем. Богатый функционал и русская локализация привлекают внимание к данной системе.

iWebMall

Демо: 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)– еще один бесплатный профессиональный интернет-магазин с открытым исходным кодом.

ECShop

Особенности интернет-магазина:

  • Использовано PHP, MYSQL, AJAX
  • Простая настройка системы
  • Неограниченная вложенность категорий
  • Неограниченное количество атрибутов для товаров
  • Производители товаров
  • Возможность продажи ПИН кодов
  • Импорт, экспорт товаров в таком формате как CSV
  • Проведение и добавление акций, аукционов в интернет-магазине и многое другое.

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

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

Демо: http://phpb2b.sourceforge.net/ (на оф сайте ссылка демо)

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

с/у УтБ

Спонсор поста – сервис SeoPult для полной автоматизации продвижения и рекламы   сайтов.

Урок 2.2 Блочная верстка: встроенные элементы, встроенный блок

Сегодня давайте уже разберемся с азами блочной верстки окончательно. Надеюсь, Вы читали, что такое блочные элементы. В данной статье Вы узнаете, что такое встроенные элементы и встроенный блок. Конечно, вы могли слышать и другие названия: инлайновые, линейные и т.д. В английском варианте это  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 сайтов с использованием инфографики

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

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

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

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

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

pointlesscorp.com/

pointlesscorp инфографика

ipolecat.com/

ipolecat

golivebutton.com/

golivebutton

skillsfactory.in/

skillsfactory

head2heart.us/

head2heart

prowebdesign.ro/

prowebdesign

ericbarse.com/

ericbarse

chappybarry.com/

chappybarry

amazeelabs.com/en

amazeelabs инфографика

launchfactory.org/

launchfactory инфографика

scandalousdirt.com/

scandalousdirt инфографика

clayant.co.za/

clayant инфографика

bikingboss.com/

bikingboss инфографика

urbaneo.fr/

urbaneo инфографика

charlieprod.com/

charlieprod инфографика

lugin.pl/strona/

lugin инфографика

sleekdesignstudio.com/

sleekdesignstudio инфограцика

jorgerigabert.com/

сайт jorgerigabert

mintdigital.com/

сайт mintdigital

melonfree.com/

сайт melonfree

источник

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

с/у УтБ

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

Урок 2.1 Блочные элементы

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

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

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

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

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

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

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

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

Вложенность

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

Пример:

</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 посмотреть исходный код.

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

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

с/у УтБ

Спонсор статьи: Интернет-магазин, где вы можете приобрести телефон нокия 803 с самой лучшей камерой.

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

Gtalk.kz – 1 год в интернете!

Друзья, посетители и случайный человек на блоге. Сегодня праздник у блога верстальщика УтБ из Казахстана. Честно, точную дату не помню, поэтому праздновать будем по первой статье (дата публикации), которая была опубликована 6 апреля 2011 года.

блогу gtalk.kz 1 год

Год пролетел незаметно. В марте прошлого года (2011) было смутное время. Одно только: я окончательно решил, что хочу завести блог, где могу оставлять записки по интересным для меня темам. В принципе, Вы можете все это прочитать. :neutral:

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

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

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

Пару слов о будущем блога

Теперь немного о нововведениях и планах на будущее:

  • - сейчас обговаривается новый дизайн, учитывая, мягко говоря, не удачную попытку смены шаблона на блоге;
  • - новый «облик» принесет изменения в структуру и ликвидацию Dofollow, т.е. скоро gtalk.kz перестанет быть dofollow, как печально бы это не звучало.
  • - будут продолжения уроков по верстке. Это однозначно. Сделаем разные шаблоны html и для CMS и многое другое. Будет и html5.
  • - теперь будут статьи не только о wordpress, но и joomla. Сейчас мы продумываем структуру и как сделать это получше.
  • - ну, и конечно, интересные статьи и полезная информация для Вас ;)

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

В общем все! Теперь можете меня поздравлять.

с/у УтБ

На десерт по поводу праздника веселое видео для настроения ;)