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

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

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

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

Помимо двух указанных источников, существует так называемая классическая “рыба”. Это текст на латинском языке, начинающийся со слов “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;
}

На этом все.


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

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

Фрагмент шапки сайта

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

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

Слои, отрисовывающие логотип шапки

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

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

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

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

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

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

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

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

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

Анализируем свойства продублированных слоев

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

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

Обрезка прозрачных слоев фона

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

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

Панель с удаленным слоем Shape2

В рабочем окне 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;
}

На этом все.