Маленькая заметка о хитрости верстки.

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

С появлением стандарта CSS3 цветовые переходы можно передать в коде легко и быстро. Поэтому, закодировать градиент - это не вопрос. Главное - быть внимательным и не пропустить (заметить) его.

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

И затем в палитре слоев “Layers” смотреть, какой цветовой переход дизайнер заложил в данном случае. Но вот, чтобы просто узнать, присутствует ли в элементе градиент или нет (и стоит ли с ним “повозиться” впоследствии для передачи в коде), можно поступить следующим образом.

Допустим, есть страница 404 от известной web-студии TemplateMonster.com с фоновой заливкой определенного цвета:

Страница с фоном в Photoshop

Мне нужно по-быстрому узнать, есть ли на ней градиентный переход по-вертикали. Выбираю инструмент Photoshop под названием “Пипетка” (Eyedropper). Можно активировать его на панели инструментов, или же проще и быстрее воспользоваться “горячей клавишей” I (заглавная буковка

1
I
в английской раскладке). И “забираю” цвет в верхней четверти фона страницы:

Цвет в верхней половине фона в Photoshop

Не закрываю окно “Пипетки”. “Забираю” цвет во-второй четверти фоновой заливки и проверяю, не изменился ли цвет. И так далее - третья четверть, четвертая четверть. И каждый раз смотрю, поменялся цвет или нет:

Цвет в нижней половине фона в Photoshop

Другими словами, я “пробежался” по-вертикали с помощью пипетки и выяснил, что в конкретном случае, который представлен здесь, цвет везде одинаков -

1
#140100
. Итог - фоновая заливка страницы 404 выполнена дизайнером с использованием одного цвета. Поэтому в CSS-правилах можно указать коротко:

background: #140100

Все. Просто и со вкусом.


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

Что такое “рыба”? Это ничего незначащий текст, единственная роль которого состоит в качестве наполнителя текстом тех областей, в которых в последствии предполагается располагать осмысленный контент.

В процессе верстки такого текста у верстальщика естественно нет такого контента. Но он ему и не нужен. Для него главное создать полную копию макета и заполнить каким-либо текстом.

На практике каждый поступает при наполнении “рыбой”, исходя из своих предпочтений. Кто-то пользуется статьями из Википедии, кто-то берет любые тексты из рефератов Яндекса.

Помимо двух указанных источников, существует так называемая классическая “рыба”. Это текст на латинском языке, начинающийся со слов “Lorem ipsum dolor sit amet”.

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

В Интернете имеется достаточное количество сайтов, являющихся генераторами подобного текста. К примеру, популярный сайт Lipsum.com.

Однако, для распространенного блокнота программистов Notepad++ имеется плагин, который также является генератором Lorem ipsum. Название плагина именно такое - “Lorem Ipsum”. Устанавливается плагин через менеджер плагинов “Plugin Manager”.

После установки плагин прописывается в меню “Плагины - InsertLoremIpsum - View Insert Dialog”. При его активации открывается диалоговое окно в правой части:

Плагин LoremIpsum в Notepad++

Управление “LoremIpsum” минималистичное, но что называется - все по делу.

В верхнем окошке устанавливается число (по умолчанию оно равно 5), являющееся счетчиком слов, предложений или параграфов, которые будут вставлены в тело кода.

Следующие за ним три строки:

  • 1
    
    words
    (слова)
  • 1
    
    sentences
    (предложения)
  • 1
    
    paragraphs
    (параграфы)

… являются радиопереключателями, с помощью которых можно выбрать, что необходимо вставлять в код - слова, предложения или параграфы.

Флажок “Start with Lorem ipsum” задает условие, при котором каждый набор слов, предложения или параграфы начинаются с Lorem ipsum. И в самом низу расположена кнопка “Insert”, предназначение которой очевидно - вставить выбранный набор слов, предложений или параграфов в код html-документа.

Перейдем от слов к делу и на практике вставим “рыбу”.

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

1
checkbox
“Start with Lorem ipsum”.

Устанавливаем курсор мыши в то место html-кода, куда необходимо поместить “рыбу” и нажимаем кнопку “Insert”:

Плагин LoremIpsum - вставка слов в Notepad++

Вставим 3 предложения. Устанавливаем счетчик в значение

1
3
. Переводим переключатель в положение
1
sentences
(предложения). Оставляем пустой строку “Start with Lorem ipsum”.

Устанавливаем курсор мыши в то место html-кода, куда необходимо поместить “рыбу”. Жмем на “Insert”:

Плагин LoremIpsum - вставка трех предложений в Notepad++

Вставляем 1 параграф. Устанавливаем счетчик в значение 1. Переводим радиокнопку в положение

1
paragraphs
(параграфы). Устанавливаем курсор мыши в то место html-кода, куда необходимо поместить “рыбу”. Нажимаем кнопку “Insert”:

Плагин LoremIpsum - вставка одного параграфа в Notepad++

Заключение

Как мне кажется, использование плагина “LoremIpsum”, встроенного в Notepad++, более удобно, чем сторонние источники, типа сайтов-генераторов. Удобство заключается в том, что все “под рукой”. В любой момент можно открыть диалоговое окно вставки “рыбы” и произвести практически моментальное наполнение содержимым.

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

На этом все.


Эта статья будет касаться настройки табуляции в Sublime Text. Первый вопрос - а для чего это нужно и что не устраивает в настройках редактора по умолчанию? На эти два вопроса у меня есть два ответа.

Первое - при общении на форуме верстальщиков было высказывание, что при создании HTML-кода желательно заменить символы табуляции на символы пробела. К примеру,

1
Tab
размером
1
4
нужно заменить на
1
4
символа пробела, или же
1
Tab
размером
1
2
заменить на
1
2
символа пробела.

Насколько я могу помнить, такое требование небезосновательно, ибо существуют рекомендации Google Руководство по оформлению HTML/CSS кода от Google, в которых упоминается данный вопрос.

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

1
Tab
равным
1
4
(четырем) суммарное смещение строк всего кода может быть велико и такой код затруднительно читать.

Я нахожу такое объяснение (и это мое личное предпочтение) данному вопросу. Итак, приступим к рассмотрению, как настраивается отступы и табуляции в Sublime Text.

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

Вкладка настройки табуляции

В правом нижнем углу находится кнопка-текст, при нажатии на которую открывается контекстное меню, представленное выше.

Первое - здесь можно выбрать размер табуляции - от

1
Tab Width: 1
до
1
Tab Width: 8
. Тот размер таба, который используется на данный момент, отмечен галочкой.

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

1
4
, а необходимо изменить его на размер
1
2
, то достаточно изменить в этом окне значение с
1
4
на
1
2
. Редактор автоматически изменит размер всей табуляции документа с
1
4
на
1
2
- очень удобно.

Строка “Convert Indentation to Spaces” позволяет автоматически конвертировать всю табуляцию открытого документа в символы пробелов. Строка “Convert Indentation to Tabs” выполняет противоположную функцию - преобразование пробельных символов с табуляцию. При этом редактор выполняет данную задачу также автоматически, для всего документа, ничего выделять не нужно.

Самая верхняя строка - “Indent Using Spacing” показывает, какие символы используются в текущем документе для создания отступов - табуляция или пробелы. В моем случае - это символы пробелов. Это настройка, выставленная в Sublime Text для всех документов, открываемых или создаваемых. Достичь ее можно, отредактировав файл конфигурации редактора.

Редактирование файла конфигурации Sublime Text

Для редактирования настроек в редакторе предназначено два файла - один общий, с настройками по умолчанию (открыть его можно в меню через “Preferences - Settings - Default”).

Настроек там много, но все они хорошо документированы, так что не проблема понять, для чего каждая предназначена. Данный файл редактировать не рекомендуется, так как для пользовательских настроек предназначен еще один файл конфигурации - “Preferences - Settings - User”.

Вот в него я и буду писать свои личные предпочтения для работы в Sublime Text.

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

Пользовательские настройки Sublime Text

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

Первая строка -

1
"tab_size": 2
- задает размер отступа. В моем случае он равен
1
2
(два символа).

Вторая строка -

1
"translate_tabs_to_spaces": true
- заставляет Sublime Text преобразовывать символы табуляции в символы пробела.

Вот и все - этими двумя строчками я добился желаемого результата - мой Sublime Text в каждом новом документе делает отступы размером в два пробельных символа.

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

Отдельно стоит отметить понравившиеся мне:

  • 1
    
    "trim_trailing_white_space_on_save": true
    - удаление пустых символов в конце строки при сохранении файла;
  • 1
    
    "save_on_focus_lost": true
    - при потере фокуса Sublime автоматически сохраняет редактируемый файл;
  • 1
    
    "ensure_newline_at_eof_on_save": true
    - при закрытии файла автоматически добавлять пустую строку в его конец.

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

О темах для Sublime Text

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

1
Soda
.

Такое впечатление, что русскоязычные пользователи все являются фанатами Mac OS X, ибо это тема “закошена” под такой стиль оформления.

Лично мне она не нравиться. У нее слишком яркая цветовая гамма. Когда по полдня рассматриваешь HTML или CSS код в Sublime Text, то начинаешь это чувствовать.

Моя любимая тема оформления -

1
Farzher
. Даже в ее описании говориться, что “возможно, это лучшая тема для web-дизайнеров”.

Она действительно имеет приятную передачу цветов, сами цвета приглушены (если даже выбран светлый вариант). Ниже приведу картинку с открытым HTML-кодом, расцвеченым в

1
Farzher Neon
:

Тема оформления Farzher Neon

На этом все.


Рассмотрим случай, когда на одной машине (desktop) стоит все та же Ubuntu, а на другой машине (notebook) стоит Windows XP.

Необходимо соединить оба компьютера по

1
ad-hoc
wifi. Требуется создать локальную домашнюю сеть, которая называется одноранговой. Другими словами, у нас нет в наличии таких сетевых устройств, как концентратор, коммутатор или маршрутизатор. Соединение между двумя (в нашем случае) компьютерами будет установлено напрямую,
1
точка-точка
. В первом шаге настроим сеть на десктопе в Ubuntu. Затем повторим настройку на ноутбуке в Windows XP.

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

Шаг Первый - настройка ad-hoc wifi в Ubuntu Karmic

Открываем NetworkManager правым щелчком мыши на значке в Панели Gnome и выбираем “Edit connections”. Появляется окно “Network Connections”.

Переходим на вкладку “Wireless” (Беспроводные):

Start Network Connections

Нажимаем Add (Добавить). Появляется окно из четырех вкладок (tabs) для создания нового соединения. В первой вкладке вводим общую информацию о создаваемой нами сети:

  • 1
    
    Connection name
    (имя сети) - это имя сети, которое будет отображаться на компьютере и в списке сетей NetworkManager;
  • 1
    
    SSID
    - реальное имя сети. Каждая сеть Wi-Fi имеет свое имя, по которому сетевые устройства распознают их и подключаются к ним;
  • 1
    
    Mode
    - режим сети. В выпадающем списке выбираем режим сети Ad-hoc;
  • остальные три поля -
    1
    
    BSSID
    ,
    1
    
    MAC address
    и
    1
    
    MTU
    оставляем пустыми.

Ubuntu Editing Windows XP

Переходим на вкладку “Wireless Security”. Оставляем поле “Security” пустым (None):

Security Editing Windows_XP

Далее, переходим на вкладку “IPv4 Settings”. Здесь мы выбираем метод получения IP-адреса компьютером в сети. В нашем случае мы задаем его вручную.

Для этого в выпадающем списке “Method” выбираем “Manual” (Ручной). Затем, в поле “Addresses” (Адреса) нажимаем кнопку Add (Добавить) и последовательно задаем IP-адрес

1
192.168.0.30
, маску сети “Netmask”
1
255.255.255.0
и шлюз сети “Gateway”
1
1.1.1.1
. Поля “DNS servers” и “Search domains” оставляем пустыми:

IPv4 Settings-Editing Windows_XP

Вкладку “IPv6 Settings” оставляем как есть, ничего не конфигурируя (Method - Ignore):

IPv6 Settings-Editing Windows_XP

Нажимаем кнопочку Apply (Применить) и видим конечный результат работы - список сетей в “NetworkManager” и нашу Windows_XP среди них:

Finish Network Connections

Закрываем окно. Вновь нажимаем, теперь уже левой кнопкой мыши, на значке “NetworkManager” в Панели Gnome. Выбираем в выпавшем списке “Connect to hidden wireless network” (Подключиться к скрытой беспроводной сети).

В списке “Connection” выбираем нашу Windows XP и нажимаем Connect (Соединить):

Connect to hidden wireless network

В эмуляторе терминала набираем команду:

$ sudo ifconfig -a

и видим, что сетевой интерфейс поднят и сеть запущена:

Ubuntu Desktop

Шаг Второй - Настройка
1
ad-hoc
wifi в Windows XP

Открываем в “Панели управления” - “Сетевые подключения”:

Network Connections Windows XP

Кликаем правой кнопкой мыши на значке “Беспроводное сетевое соединение” и в контекстном меню - “Properties” (Свойства). В окне “Свойств” находим в самом низу строку “Протокол Интернета (TCP/IP)”:

TCP IP Windows XP

Нажимаем “Свойства”. Открывается окно настроек TCP/IP. Здесь мы задаем IP-адрес, маску сети и шлюз сети так же, как и в NetworkManager, за исключением того, что IP-адрес у нас будет несколько иной -

1
192.168.0.31
:

Properties TCP IP Windows XP

Нажимаем OK. Далее кликаем левой кнопкой мыши на значке “Беспроводное сетевое соединение” в “Сетевые подключения” “Панели управления”. Открывается окно со списком беспроводных сетей, находящихся в зоне доступа компьютера:

Start Wireless Networks Windows XP

Выбираем “Установить беспроводную сеть” для создания сети

1
ad-hoc
. Запускается “Мастер беспроводной сети”, пошагово проведущий по несложной настройке новой сети windows:

Step1 Windows XP

Step2 Windows XP

Step3 Windows XP

Step4 Windows XP

Step5 Windows XP

Нажимаем “Готово”. Вновь открывается окно со списков доступных беспроводных сетей. В этом списке появилась и наша windows:

Step6 Windows XP

Выбираем сеть windows и нажимаем “Подключить”:

Step7 Windows XP

Step8 Windows XP

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

Step9 Windows XP

Шаг Третий - тестирование сети из Ubuntu

Ping самих себя:

Ping Self - Network Tools

Ping Windows XP:

Ping Windows - Network Tools

Трассировка Windows XP:

Traceroute Windows - Network Tools

Сканирование портов Windows XP:

Port Scan Windows - Network Tools

На этом все.


Свойство

1
box-shadow
позволяет web-дизайнерам создавать очень интересные эффекты для элементов страницы. А именно - с помощью него можно задавать тень для блочных элементов, например таких, как
1
div
.

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

Можно также создать тень, которая будет размещена не снаружи элемента, а внутри него.

Синтаксис свойства
1
box-shadow
:

box-shadow: h-shadow v-shadow blur spread color inset;

где:

  • 1
    
    h-shadow
    - смещение тени по горизонтали;
  • 1
    
    v-shadow
    - смещение тени по вертикали;
  • 1
    
    blur
    - размытие границ тени;
  • 1
    
    spread
    - размер тени;
  • 1
    
    color
    - цвет тени;
  • 1
    
    inset
    - создать тень внутри элемента.

Порядок следования значений свойства

1
box-shadow
необязательный, то есть, можно расположить их в любой последовательности.

Простой пример использования

1
box-shadow
:

Браузеры Firefox, Chrome, Opera и IE9 отобразят серую тень под этим блоком.

Код, выводящий данный результат:

box-shadow: 5px 5px 2px #888;

Однако, приведенный пример будет не совсем работоспособным. Для браузеров Firefox и Chrome более ранних версий может понадобиться добавление префиксов. Тогда полная версия кода будет выглядеть следующим образом:

box-shadow: 5px 5px 2px #888;
-moz-box-shadow: 5px 5px 2px #888;
-webkit-box-shadow: 5px 5px 2px #888;

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

Примеры использования кода:

box-shadow: 5px 5px;
box-shadow: 5px 5px 2px;
box-shadow: 5px 5px 2px #888;
box-shadow: 5px 5px 2px 3px #888;
box-shadow: 5px 5px 2px 3px #888 inset;
box-shadow: 5px 5px 2px #888, -5px -5px #f4f4f4, 1px 1px 2px #cc6600;

Последняя строка наиболее интересна, поэтому разберем ее подробнее.

Смещения по горизонтали и вертикали могут принимать как положительные, так и отрицательные значения. В последнем случае тень будет перемещаться не вправо, а влево. Размытие тени blur и размер тени spread могут иметь только положительные значения или 0. Несколько теней для одного элемента можно задавать последовательно, через запятую. В нашем примере было задано три тени с разными цветами и смещением.

Теория
1
box-shadow

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

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

Горизонтальное смещение определяет смещение тени относительно элемента по горизонтали. Может принимать положительное или отрицательное значение. При положительном значении тень смещается вправо от элемента. При отрицательном - влево от элемента.

Вертикальное смещение задает смещение тени по вертикали относительно элемента. Может рпинимать положительное или отрицательное значение. При положительном значении тень смещается относительно элемента вниз по вертикали. При отрицательном значении смещение происходит вверх по вертикали.

Третье и необязательное значение свойства box-shadow, это размытие

1
blur
. По умолчанию оно равно 0 и граница тени четкая. Размытие может принимать только положительные значения. Чем больше число, тем сильнее происходит размытие. В спецификации не разъясняется точного алгоритма, по которому происходит усиления размытия при увеличении его значения.

Размер тени spread также явлется необязательным параметром и может принимать как положительные, так и отрицательные значения. При положительном значении тень увеличивается по всем направлениям. При отрицательном наоборот уменьшается.

Несколько примеров теней

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

В примере A смещение тени происходит влево и вверх на 5 пикселей.

  #Example_A {
  -moz-box-shadow: -5px -5px #888;
  -webkit-box-shadow: -5px -5px #888;
  box-shadow: -5px -5px #888;
}

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

  #Example_B {
  -moz-box-shadow: -5px -5px 5px #888;
  -webkit-box-shadow: -5px -5px 5px #888;
  box-shadow: -5px -5px 5px #888;
}

В примере С таже самая тень имеет размер в 5 пикселей.

  #Example_C {
  -moz-box-shadow: -5px -5px 0 5px #888;
  -webkit-box-shadow: -5px -5px 0 5px#888;
  box-shadow: -5px -5px 0 5px #888;
}

Пример D показывает тень, имеющую размытие в 5 пикселей и размер в 5 пикселей.

  #Example_D {
  -moz-box-shadow: -5px -5px 5px 5px #888;
  -webkit-box-shadow: -5px -5px 5px 5px#888;
  box-shadow: -5px -5px 5px 5px #888;
}

В примере E показана тень, которая не имеет смещения по горизонтали и вертикали, но у нее задано размытие в 5 пикселей.

  #Example_E {
  -moz-box-shadow: 0 0 5px #888;
  -webkit-box-shadow: 0 0 5px#888;
  box-shadow: 0 0 5px #888;
}

В примере F тень также не имеет смещения, но имеет размытие и размер в 5 пикселей.

  #Example_F {
  -moz-box-shadow: 0 0 5px 5px #888;
  -webkit-box-shadow: 0 0 5px 5px#888;
  box-shadow: 0 0 5px 5px #888;
}

На этом все.