Эта статья будет касаться настройки табуляции в 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.

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

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

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

1

"tab_size": 2

1

2

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

1

"translate_tabs_to_spaces": true

Вот и все - этими двумя строчками я добился желаемого результата - мой 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

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

1

Farzher Neon

На этом все.

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

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

1

ad-hoc

1

точка-точка

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

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

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

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

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

• 1	Connection name

  (имя сети) - это имя сети, которое будет отображаться на компьютере и в списке сетей NetworkManager;

• 1

  SSID

  - реальное имя сети. Каждая сеть Wi-Fi имеет свое имя, по которому сетевые устройства распознают их и подключаются к ним;

• 1

  Mode

  - режим сети. В выпадающем списке выбираем режим сети Ad-hoc;
• остальные три поля -

  1

  BSSID

  ,

  1	MAC address

  и

  1

  MTU

  оставляем пустыми.

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

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

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

1

192.168.0.30

1

255.255.255.0

1

1.1.1.1

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

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

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

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

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

$ sudo ifconfig -a

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

Шаг Второй - Настройка

1

ad-hoc

wifi в Windows XP

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

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

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

1

192.168.0.31

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

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

1

ad-hoc

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

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

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

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

Ping самих себя:

Ping Windows XP:

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

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

На этом все.

Свойство

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

Размер тени 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;
}

На этом все.

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

Проблема заключалась в том, что один слой накладывался на другой. Решение было найдено благодаря помощи форума htmlbook. Итак, имеется фрагмент шапки. Из нее необходимо вырезать будущий логотип, который должен представлять из себя файл с прозрачным фоном, значком флага и надписью “Formula”:

Выбираем инструмент “Перемещение”, проверяем, что в панели отмечен флажок “Автовыбор: Группы слоев”. Поочередно кликаем в шапке на значке флага, надписи “Formula” и фоновой заливке, одновременно отмечая, какие слои отвечают за прорисовку каждого элемента макета.

В результате в панели слоев видим три слоя, которые в сумме составляют шапку: “Formula”, “Layer26”, “Shape2”:

Для дальнейшей работы с данными слоями наиболее удобным вариантом будет скопировать их в отдельный новый документ. Этим достигаются две цели:

• во-первых - с отдельно выделенными из документа слоями удобнее работать;
• во-вторых - таким образом мы обезопасим себя от случайного непреднамеренного изменения исходного документа.

И хотя в Photoshop есть инструмент “История”, все же данный способ мне кажется более удобным.

Итак, выделяем все три слоя. Для этого зажимаем клавишу Ctrl и поочередно кликаем мышью на слоях “Formula”, “Layer26”, “Shape2”. Затем переходим в меню “Слои - Дубликат слоев”.

Открывается небольшое диалоговое окно “Дубликат слоев”, в котором выбираем назначение “Документ - Новый” и нажимаем ОК. Выбранные нами слои продублируются (создадутся копии) в новый документ Photoshop, который автоматически откроется в новой вкладке “Безимени-1.

Шахматка в фоне означает, что фоновый слой прозрачный. Уберем лишние прозрачные пиксели фона, которые нам ни к чему. Но перед этим еще раз проанализируем три продублированных слоя.

Слой “Formula” представляет из себя текст с эффектом тени. При вырезании логотипа мы оставим его как есть - вместе с тенью. В этом случае текст “попадет” в шапку будущего шаблона сайта неизменным - нарисованным тем шрифтом, который выбрал дизайнер. Это полностью нас устраивает.

Следующий слой - это значок флага. Его мы также должны перенести в шапку шаблона. Третий слой - фоновая заливка с градиентом. На панели слое мы видим, что оба последних слоя взаимосвязаны друг с другом - “Layer26” и “Shape2”.

Помимо этого, к слою “Shape2” применены эффекты - внутренняя и внешняя тени. От них мы можем легко избавиться, так они свободно реализуются с помощью стилевых правил CSS, которые мы пропишем в будущем шаблоне. Поэтому отключаем их, щелкнув на “глазе” напротив надписи “Эффекты”:

Теперь уберем прозрачные пиксели фонового слоя. Для этого воспользуемся инструментов “Тримминг”. Переходим в меню “Изображение - Тримминг”.

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

Видим, что фон удалился и осталось только само изображение: фон, флаг и надпись “Formula”. Теперь необходимо убрать фоновую заливку. Ее мы сделаем средствами CSS, в том числе и градиент. Это уменьшит размер результирующего файла, что положительно скажется на скорости загрузки сайта.

Для этого просто удалим слой “Shape2”, который и является фоном шапки. Выделяем его в панели слоев и жмем клавишу Delete. Получается такая картина в панели:

В рабочем окне Photoshop также изменилось кое-что. А именно - удалилась заливка и остались только значок флага и надпись “Formula”.

Это как раз то, что нам и требовалось. И опять появилась шахматка на месте бывшего слоя Shape2. Ее мы может опять-таки, тоже удалить. А точнее - обрезать получившееся изображение тем же способом - через инструмент “Тримминг”.

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

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

1

png

Создаем стилевые правила для шапки будущего шаблона сайта:

<div class="header">
  <div class="logo">
    <a href="/" title="На главную">
      <img src="images/logo.png">
    </a>
  </div>
</div>

.logo{
  position: absolute; top: 0; left: 0;
}

.header {
  -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
          border-radius: 3px;
  -webkit-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255,255,255,0.3);
     -moz-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255,255,255,0.3);
          box-shadow: 0 4px 4px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255,255,255,0.3);
  height: 45px;
  background-color: #bf1919;
  overflow: hidden;
  position: relative;
}

На этом все.

Одним из незаменимых инструментом для работы верстальщика является текстовый редактор Notepad++.

Легкий, удобный и бесплатный. С массой различных плагинов, превращающих его в тот инструмент, который необходим в работе. Это блокнот для программистов, причем не только web-кодеров, но из javascript, php-разработчиков. Недаром он пользуется неизменной популярностью на протяжении стольких лет.

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

Рассмотрим такую ситуацию. Имеются два документа, которые одновременно открыты в программе Notepad++. По умолчанию, каждый документ открывается в отдельной вкладке. Эти вкладки могут располагаться по разному, все зависит от предпочтений пользователя и настроек программы.

Может случится так, что имеется оригинал документа, на основе которого необходимо создать свой файл. Такой случай может произойти, к примеру, когда создается файл templateDetails при создании шаблона под Joomla.

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

Notepad++ может упросить и ускорить эту работу. Для этого необходимо щелкнуть правой кнопкой мыши на активной вкладке и выбрать из контекстного меню пункт “В другое окно”. Эта возможность мне кажется одной из наиболее удобных и полезных:

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

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

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

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

Две копии одного документа будут разнесены по разным частям окна.

Третья возможность Notepad++ - это перемещение существующего документа в новый экземпляр. То есть, у нас имеется два файла, которые одновременно открыты в одной программе Notepad++. Если нам необходимо переместить одних из этих документов в отдельное окно блокнота, то в контекстном меню (также, как и в предыдущий случаях) необходимо выбрать пункт “Переместить в Новый экземпляр”:

В результате будет запущен еще один экземпляр программы Notepad++, в котором автоматически откроется перемещаемый нами документ:

И последняя из рассматриваемых возможностей Notepad++ при работе с окнами - это когда необходимо открыть тот же экземпляр текущего документа в новом окне. То есть, текущий документ будет продублирован в новом экземпляре программы Notepad++.

Для этого снова открываем контекстное меню и выбираем теперь в нем пункт “Открыть в Новом экземпляре”:

Получится две копии одного и того же файла, но открытые в двух разных окнах программы Notepad++:

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