#html #верстка #css — Не получается сгруппировать фото товаров


Содержание

#html #верстка #css — Не получается сгруппировать фото товаров

Ряд элементов предназначен для группировки контента на веб-странице.

Элемент div

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

Параграфы

Параграфы создаются с помощью тегов

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

Если в рамках одного параграфа нам надо перенести текст на другую строку, то мы можем воспользоваться элементом
:

Элемент pre

Элемент pre выводит предварительно отформатированный текст так, как он определен:

#html #верстка #css — Не получается сгруппировать фото товаров

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

Шаблон вебсайта мы будем делать с помощью блочной верстки, использую тег – «DIV».

Шаг 1 – Разметка веб страницы с помощью тегов HTML

Прежде всего необходимо разметить нашу веб страницу используя HTML теги. Только после этого можно переходить к оформлению сайта с помощью каскадных таблиц стиля CSS.

HTML — это язык разметки гипертекста. С его помощью создается структура веб страницы. Для этих целей используются теги HTML. Они заключаются в скобки » «.

Теги, как правило следуют в паре — открывающий и закрывающий. Последний отличается тем, что имеет после первой скобки знак «/». (Например:

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

Урок 7. Блочная верстка web-сайта. Часть 1

Наиболее популярной является блочная верстка сайта или div верстка. Наш урок блочной верстки сайта поможет начинающим освоить основные приемы div верстки.

1. Основные понятия

Многие web-дизайнеры отдают предпочтение блочной верстке сайта, которая осуществляется с помощью тега

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

Рамка (border) – это контур, для которого можно задать такие характеристики как толщина, цвет и тип (пунктирная, сплошная, точечная).

Поля (padding) – отделяют содержимое блока от его рамки, чтобы текст, например, не был «впритык» к стенкам блока.

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

Блочная верстка сайта включает в себя блоки. Блоки, как и таблицы – это элементы, всегда располагающиеся на странице вертикально. То есть, если в коде страницы записаны подряд два блока, то отобразятся они в браузере один под другим. Если нам нужно расположить несколько блоков горизонтально, то в их свойствах задается такой параметр как «обтекание» (float). Но об этом чуть позже.

В данной работе мы создадим web-страничку из блоков. Сначала создадим контейнер, в который, как в коробку сложим наши блоки. Для наглядности каждый блок будет иметь свой цвет. Конечный результат должен быть таким как на рис. 2.

Контейнер будет содержать в себе пять блоков:

TOP – шапка сайта, обычно содержит логотип компании, название, заголовки и слоганы, поиск, навигацию;

LEFT и RIGHT – левая и правая колонки, обычно содержат рекламу, навигацию, рассылку, новости и т. д.:

CENTER – содержит основной текст страницы;

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

Для теста нашего сайта нам понадобятся как минимум три самых популярных браузера – Opera, Fire Fox, Internet Explorer.

Описание web-страницы в основном делается в CSS документе.

2. «Фиксированный» дизайн методом блочной верстки

1. Создайте в блокноте новый документ с расширением css и сохраните его под именем mystyle.css.

2. Создайте HTML-документ и сохраните его в той же папке.

3. В самом начале HTML-документа впишите следующую строку:

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

Мы определили нашу страничку в соответствии с DOCTYPE под названием Strict 1.0.

Требования здесь весьма строгие – все тэги, не имеющие закрывающей пары, должны заканчиваться пробелом со слэшем / перед закрывающей угловой скобкой. Но вот ведь сам DOCTYPE тоже выглядит как тэг! Почему же у него нет этого пробела со слэшем? А просто! Захотелось так разработчикам этих строгих правил. Но это единственный случай, где правило не работает.

4. Одной строкой между тегами и присоедините документ mystyle.css к документу HTML (рисунок 3).

5. В таблице стилей наберите код как на рисунке 4.

# этот знак говорит, что элемент является уникальным атрибутом и используется в HTML документе в теге div один раз.

6. Добавьте в mystyle.css шапку сайта (рисунок 5).

7. Добавим HTML документ следующий код между тегами body (рисунок 6).

И у Вас должно получиться следующее (рис. 7).

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

8. Откройте css-документ и добавьте следующий код (рисунок 8).

Каждая строка кода имеет комментарий, заключенный в скобки /* комментарий */, который не отображается в браузере. Напомню, элементы со знаком # используются в теге div >

9. Сразу после закрывающегося тега

10. Откройте HTML-документ в браузере. Должно получиться такая div верстка (рисунок 10).

11. Теперь добавьте блок footer самостоятельно. Браузер должен показать такую блочную верстку сайта (рисунок 11).

Рассмотрим атрибуты relative и absolute.

Иногда бывает необходимо разместить какой-то блок в строго заданном положении относительно родительского.

Рассмотрим простейший код.

  1. Создайте html-документ, в теле которого разместите код, как на рисунке 12.

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

Попробуем сделать так (т.е. абсолютно позиционируем дочерний блок относительно родительского).

2. Создайте таблицу стилей, в которой наберите код из листинга на рисунке 13.

3. Проверьте web-страничку в браузере. Вот что получилось (рисунок 14). Это не то, что мы хотим, не так ли? Наш дочерний элемент ушел не к маме, а к дедушке (т.е. BODY)!

Проблема решается довольно просто: родителю дополнительно задаётся position: relative;

4. Измените код своей таблицы стилей в соответствии с рисунком 15.

5. Проверьте web-страничку в браузере. Результат на рисунке 16. Оцените разницу.

Создать web-страницу, внешний вид которой изображен ниже на рисунке 17


3. «Резиновый» сайт методом блочной верстки

В заданиях 1 и 2 мы рассмотрели «фиксированный» дизайн методом блочной верстки, т.к. все блоки имели точное значение по ширине и высоте в пикселах.

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

Задание 3. Создадим «резиновый» блочный макет как на рисунке 18.

1. Создайте HTML-документ с кодом, как на рисунке 19. Сохраните документ.

2. Создайте таблицу стилей как на рисунке 20. Сохраните документ. Вы должны получить результат ка на рисунке 18.

3. Изменяя размеры браузера, проанализируйте поведение макета.

4. Комбинированная блочная верстка

Комбинированная блочная верстка (div верстка) включает как блоки фиксированной ширины, так и блоки в процентном отношении к ширине экрана.

Задание 4. Создадим комбинированный блочный макет как на рисунке 21.

1. Создайте HTML-документ с кодом, как на рисунке 22.

2. Создайте таблицу стилей как на рисунке 23. Сохраните документ. Вы должны получить результат ка на рисунке 21.

3. Изменяя размеры браузера, проанализируйте поведение макета.

Методом блочной верстки создайте web-страницу для сайта архитектурных проектов коттеджей так, как изображено на рис. 24. Изображение для шапки сайта (shapka_div.jpg).

Требования к макету:

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

Блочная верстка или основы анатомии скелета сайтов

Сайты тоже имеют свой скелет. Но о его особенностях спрашивать врачей бесполезно. Да и ветеринары тоже не в курсе строения сайта. Об этом ведомо лишь верстальщикам. Именно от них зависит строение скелета будущего ресурса. А главным способом создания костей его скелета является блочная верстка.

Верстка сайта – ремесло для посвященных

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

Следующим этапом разработки сайта после создания его макета является верстка. Задача верстальщика перенести с помощью html кода и таблиц css скелет будущего сайта в виртуальный мир. Проще говоря, перенести размеры и пропорции ресурса в форму, понятную для браузера.

В процессе верстки кодом html происходит разбивка « скелета » сайта на части. А с помощью css ( каскадных таблиц стилей ) задаются размеры его « костей », цвет и расположение.

Различают несколько видов верстки:

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

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

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

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

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

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

II. Блочная – в данный момент является основным способом верстки. В отличие от табличной блочная верстка обладает рядом преимуществ:

  • Отделение стиля элементов от кода html ;
  • Возможность наложения одного слоя на другой – такая возможность во многом облегчает позиционирование элементов.
  • Лучшая индексация поисковиками;
  • Высокая скорость загрузки страницы, состоящей от взаимно независимых элементов;
  • Легкость создания визуальных эффектов ( выпадающих меню, списков, всплывающих подсказок ).

Основным недостатком блочной верстки является некая « двусмысленность » понимания ее кода различными браузерами. Поэтому часто html страницы приходится « доводить » путем использования специальных хаков.

С появлением блочной верстки родилось такое понятие, как «кроссбраузерность». Из-за различия отображения одного и того же элемента в разных браузерах верстальщикам приходится вставлять в основной html целые куски кода (хаки).

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

Основным элементом, применяемым в блочной верстке, является тег

Как происходит блочная верстка?

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

Для примера возьмем вот такой макет сайта, созданный в Photoshop . Сначала в текстовом редакторе с помощью div задаем структуру будущего ресурса и присваиваем каждому слою свой селектор id . Получается такая структура:

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

Полный код примера index.html :

Содержимое файла style.css :

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

Конечно, этот пример является лишь наглядным пособием для демонстрации того, как происходит блочная верстка. Настоящая верстка происходит с использование фоновых изображений и логотипов, подключаемых в css . А также с включением в html и css кода хаков для оптимизации отображения во всех браузерах.

Для редактирования кода страниц сайта используются специальные редакторы html . Многие из них способны автоматически генерировать код визуальных элементов, создаваемых в них пользователем в режиме « дизайн ». Но такой код не является валидным, и чаще всего нуждается в « ручной » доводке:

Свое роднее!

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

Документация сервиса автоматической HTML верстки сайтов

На этой странице подробно описаны возможности сервиса PSD to HTML Converter и как ими воспользоваться. Вы узнаете как создать веб страницу и сделать свой web сайт практически бесплатно.

Особенности конвертации Photoshop дизайна в CSS/HTML

Для эффективного использования сервиса PSD to HTML Converter необходимо знать следующие особенности Photoshop.

  • Слой Photoshop всегда имеет прямоугольную форму и его размер определяется размером его содержимого. Любая часть слоя может быть прозрачной. Например, слой, состоящий из одного пикселя, имеет размер 1×1 пиксель. Если слой состоит из двух пикселей, один из которых находится в левом верхнем углу документа, а второй — в правом нижнем, то размер слоя будет равен размеру всего документа Photoshop (но все пиксели, кроме данных двух, будут прозрачными).
  • Слои могут пересекаться и накладываться друг на друга. Если один слой в панели слоев Photoshop находится выше, чем другой слой, то содержимое первого слоя будет находиться поверх содержимого второго слоя. Порядок наложения слоев в Photoshop сохраняется для CSS слоев в сконвертированном HTML.
  • Если какой-либо слой накладывается на текст, то текст становится недоступным для кликов мышкой. Поэтому избегайте случаев, когда слой перекрывает текстовые слои или слои с интерактивными элементами (ссылки, поля ввода).
  • Слои можно объединять в группы. Они отображаются как папки на панели слоев Photoshop.
  • Размер группы слоев определяется прямоугольной областью, которая включает в себя все слои группы. Группа — это тоже слой, поэтому относительно нее действуют те же самые правила относительно порядка наложения слоев.
  • Чтобы изменить порядок следования слоев, либо перетаскивайте их мышью на панели слоев Photoshop, либо используйте комбинации «Ctrl + [» и «Ctrl + ]».
  • Чтобы изменить имя слоя, дважды кликните по нему в панели слоев Photoshop. Вам это понадобится для того, чтобы помечать слои Вашего дизайна тегами.
  • Не используйте в своем дизайне Adjustment layers, они не поддерживаются сервисом.

Правила, по которым PSD шаблон преобразовывается в HTML верстку

Видимость слоев

Любой Photoshop файл состоит из слоев (Layer). Любая блочная HTML верстка сайта также состоит из слоев, стиль которых задается через CSS. В процессе конвертации все видимые слои из PSD дизайна преобразуются в элементы CSS/HTML верстки: слои изображений перейдут в изображения, текстовые слои перейдут в текстовые блоки.

Если слой (Layer) или группа слоев (Layer Group) имеют в Photoshop аттрибут «невидимый» (“invisible”), то они будут пропущены и не попадут в CSS верстку. Таким образом, используя сервис автоматической генерации HTML и CSS верстки, вы всегда получите то, что видите в PSD файле (WYSIWYG — What You See Is What You Get).

Создание HTML элементов

HTML довольно богатый язык и HTML/CSS верстка обычно состоит не только из изображений и текста, но также содержит ссылки, различные формы, поля ввода текста, списки, таблицы и другие HTML элементы. Чтобы автоматически создать эти HTML элементы, требуется иметь больше информации, чем изначально содержится в PSD файле. Отличный способ дать нам эту информацию – сообщить ее в имени слоя (Layer Name) в Вашем PSD файле. В имени любого слоя в любом месте Вы можете указать один или несколько тегов, которые мы интерпретируем описанным ниже способом.

Каждый слой HTML/CSS верстки будет иметь такое же имя, какое этот слой имел в PSD шаблоне (за исключением тегов, мы удалим их из имен). При этом Вам нет необходимости думать об уникальности имен в Photoshop, заботу об этом мы берем на себя.

Сложные многослойные изображения

Как уже было упомянуто, из каждого Photoshop слоя в верстке получается отдельный HTML/CSS элемент. Таким образом, если в макете для создания одного изображения (логотип/бэкграунд/т.п.) использовано несколько слоев — это плохо отразится на автоматически созданной верстке сайта — вы получите излишние элементы с изображениями.
Справиться с этой проблемой легко. Выберите один из двух недеструктивных методов:

  1. Объедините все соответствующие слои одну группу слоев и пометьте группу тегом #merge. В процессе верстки такая группа слоев будет автоматически объединена в один слой.
  2. Объедините несколько слоев в один слой, сконвертировав их в Smart Object. Для этого выделите нужные слои на панели слоев и запустите команду «Layer» -> «Smart Objects» -> «Convert to Smart Object».

HTML5/CSS3 верстка

Верстка текста из слоев PSD-макета

Все текстовые слои в Photoshop преобразуются в текстовые блоки в HTML верстке. При этом сохраняются все стилевые параметры текста и параграфа, такие как:

  • Шрифт
  • Размер шрифта
  • Цвет текста
  • Эффект отбрасывания тени
  • Выравнивание текста (left, centered, right, justify)
  • Отступ сверху
  • Отступ снизу
  • Межстрочный интервал
  • Надстрочный/подстрочный текст
  • Направление текста (LTR или RTL)
  • и другие

Сервис поддерживает автоматическое встраивание всех (650+) WEB шрифтов от Google.


Текст, шрифт которого не является стандартным WEB шрифтом, верстается как изображение, имеющее в качестве альтернативного текста текст из слоя в Photoshop. Сервис создаст предупреждение при использовании нестандартных шрифтов в текстовых слоях.

Если вы все же хотите сверстать слой с нестандартным шрифтом как текст и затем подключить шрифт с помощью @font-face, пометьте такой слой тегом #text. После конвертации не забудьте вручную добавить директиву @font-face в сгенерированный сервисом .css файл. Заметьте, что т.к. на нашем сервере нет нестандартных шрифтов, то произойдет замена шрифта стандартным, отчего на сгенерированном скриншоте верстка будет не соответствовать оригинальному дизайну.
Если в вашем макете много текстовых слоев с нестандартными шрифтами, вы можете воспользоваться опцией «Конвертировать ВСЕ текстовые слои в текст» при конвертации PSD файла.

Для текстовых слоев в Photoshop разрешается устанавливать только следующие эффекты (Blending Options) :

  • Отбрасывание тени (Drop Shadow)
  • Наложение цвета (Color Overlay)

Только эти эффекты могут быть установлены с помощью CSS. Текстовые слои, для которых установлены какие-либо другие эффекты, будут сконвертированы в изображения.
Для создания заголовков различных уровней используйте теги #h1, #h2, #h3, #h4, #h5, #h6.

Границы текстового блока могут отличаться в браузере и в Photoshop. Для более точного управления границами текста переведите текстовый слой в режим «Paragraph Text» из режима «Point Text». В данном режиме редактирования Вы сможете точно установить границы текстового слоя. Для изменения режима редактирования, кликните правой кнопкой мыши по слою в панели слоев и выберите соответствующую опцию — «Convert to Paragraph Text» либо «Convert to Point Text».

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

Поддерживаемые теги

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

  • добавить перед тегом хэш ‘#’, например: #bg,
  • добавить перед тегом тире ‘-‘, например: -bg,
  • заключить имя тега в символы ‘$’, например: $bg$.

Тегом можно пометить любой слой или группу слоев в дизайн-макете. Добавить тег в дизайн-макет Photoshop очень просто — нужно написать его в имени слоя в любом месте.
Например, если есть слой «Layer 1» и Вы хотите сделать его ссылкой, то нужно добавить тег #link в имя слоя, например, таким образом: «Layer 1#link», или «La$link$yer 1», или «-link Layer 1». В любом из случаев в получившейся верстке класс слоя будет: .

Имена Clipping mask слоев не должны содержать тегов — тегами следует помечать базовый слой, к которому применяется маска.

На данный момент в именах слоев можно использовать следующие теги:

  • #header, #footer, #section, #nav, #article, #as .
  • #link — если тегом помечен один слой, то он будет сверстан, как ссылка. Если тегом помечена группа слоев, то каждый слой группы будет сверстан как ссылка.
  • #link — если в качестве параметра тега передана ссылка, то она будет использоваться в качестве гиперссылки в сгенерированном коде. Пример: #link.
  • #nolink — текст или часть текста помеченного слоя, имеющий подчеркнутый стиль, не будет автоматически верстаться как ссылка. По умолчанию подчеркнутый текст конвертируется в гиперссылку.
  • #bg — этот тег используется как подсказка, что данное изображение надо сверстать, как background свойство блока, содержащего этот слой. Если у в группе слоев несколько слоев помечено тегом #bg, то они будут объединены в одно изображение. Если пометить тегом целую группу слоев, то все слои группы будут объединены в одно изображение и оно будет использовано как бэкграунд.
    Единичные слои в группе необязательно помечать данным тегом, т.к. сервис сам находит наиболее подходящий в качестве фона слой. Обычно, это изображение наибольшего размера в данной группе.
  • #bg<[тип повторения]>, где [тип повторения] — это одно из:
    repeat-x или rx — фон будет повторяться по оси x
    — repeat-y или ry — фон будет повторяться по оси y
    repeat или r или repeat-xy — фон будет повторяться по осям x и y
    Примеры: #bg; #bg, #bg.
  • #bg-size — позволяет вручную задать css стиль background-size для фонового изображения.
    Параметр size — это либо ‘cover‘, либо ‘contain’, либо пара значений в px или %.
    Примеры:
    #bg-size
    #bg-size
    #bg-size
  • #bg-pos — позволяет вручную задать css стиль background-position для фонового изображения.
    Параметр [HorizontalPosition] — одно из: left, right, center.
    Параметр [VerticalPosition] — одно из: top, bottom, center.
    Examples:
    #bg-pos
    #bg-pos
  • #h1, #h2, #h3, #h4, #h5, #h6 — из текста или изображения будет сверстан заголовок 1-го, 2, 3, 4, 5 или 6-го уровня. Если слой текстовый, то он должен обязательно состоять из одного параграфа.
  • #h1, . , #h6— из изображения будет сверстан заголовок 1-го, 2, 3, 4, 5 или 6-го уровня, при этом изображение будет иметь в качестве альтернативного текста заданное значение. Пример: «Logo#h1«. Также, для этой цели вы можете использовать тег #alt: «Logo#h1#alt«.
  • #in_text — Если пометить тегом одиночный слой, то из его изображения будет сверстана форма ввода текста (type=”text”). Если внутри изображения, помеченного тегом, помещается текстовый слой, то этот текст будет установлен в качестве значения аттрибута placeholder.
    Также можно пометить тегом группу слоев. Если группа содержит текстовый слой, то этот текст будет установлен в качестве значения аттрибута placeholder. Остальные слои группы будут объединены в одно изображение.
    Скачайте psd макет с примером использования данного тега и посмотрите результат его конвертации.
  • #in_passw — из изображения будет сверстана форма ввода текста для ввода пароля (type=”password”). Если внутри изображения, помеченного тегом, помещается текстовый слой, то этот текст будет установлен в качестве значения аттрибута placeholder.
    Также можно пометить тегом группу слоев. Если группа содержит текстовый слой, то этот текст будет установлен в качестве значения аттрибута placeholder. Остальные слои группы будут объединены в одно изображение.
    Скачайте psd макет с примером использования данного тега и посмотрите результат его конвертации.
  • #textarea — из изображения будет сверстана форма для ввода нескольких строк текста (textarea). Если внутри изображения, помеченного тегом, помещается текстовый слой, то этот текст будет установлен в качестве значения аттрибута placeholder.
    Скачайте psd макет с примером использования данного тега и посмотрите результат его конвертации.
  • #in_button — из изображения будет сверстана форма ввода (input) типа «кнопка» (type=”button”). Если внутри изображения, помеченного тегом, помещается текстовый слой, то этот текст будет установлен в качестве значения аттрибута alt (альтернативный текст).
    Также можно пометить тегом группу слоев. Если группа содержит текстовый слой, то этот текст будет установлен в качестве значения аттрибута alt (альтернативный текст). Остальные слои группы будут объединены в одно изображение.
  • #in_checkbox — будет сверстана форма ввода (input) типа «флажки» (type=”checkbox”). Добавьте тег #checked, чтобы checkbox или radio button были выделены по умолчанию.
    Скачайте psd макет с примером использования данного тега и посмотрите результат его конвертации.
  • #in_radio — будет сверстана форма ввода (input) типа «переключатель» (type=”radio”). Для того, чтобы объединить несколько переключателей в одну группу, задайте им идентичные имена в PSD шаблоне либо задайте имя переключателя как параметр тега: #in_radio . Добавьте тег #checked, чтобы checkbox или radio button были выделены по умолчанию.
    Скачайте psd макет с примером использования данного тега и посмотрите результат его конвертации.
  • #in_file — из изображения будет сверстана форма для ввода имени файла для отправки на сервер (type=”file”).
  • #in_image — из изображения будет сверстана форма ввода типа «поле с изображением» (type=”image”). Если внутри изображения, помеченного тегом, помещается текстовый слой, то этот текст будет установлен в качестве значения аттрибута alt (альтернативный текст).
    Также можно пометить тегом группу слоев. Если группа содержит текстовый слой, то этот текст будет установлен в качестве значения аттрибута alt (альтернативный текст). Остальные слои группы будут объединены в одно изображение.
  • #in_submit — из изображения будет сверстана форма ввода для отправки данных формы на сервер (type=”submit”). Если внутри изображения, помеченного тегом, помещается текстовый слой, то этот текст будет установлен в качестве значения аттрибута alt (альтернативный текст).
    Также можно пометить тегом группу слоев. Если группа содержит текстовый слой, то этот текст будет установлен в качестве значения аттрибута alt (альтернативный текст). Остальные слои группы будут объединены в одно изображение.
    Скачайте psd макет с примером использования данного тега и посмотрите результат его конвертации.
  • #select — позволяет сверстать список опций. Чтобы сверстать список опций, отметьте группу, содержащую один или несколько текстовых слоев с текстом опций, данным тегом. В качестве опций будут сверстаны даже те текстовые слои группы, которые имеют флаг «невидимый» (чтобы явно указать, что не надо верстать текстовый слой, как опцию, отметьте его тегом #skip). Кроме текстовых слоев, группа может содержать фигуру (Shape), представляющую фон списка. Остальные слои группы будут проигнорированы. Чтобы выбрать, какая опция должна быть выбранной по умолчанию, отметьте соответствующий текстовый слой тегом #selected. Скачайте psd макет с примером использования данного тега и посмотрите результат его конвертации.
  • #form — имеет смысл только когда установлен для группы слоев (Layer Group). В этом случае будет сверстан контейнер форм (form). Все формы ввода должны быть помещены внутрь группы контейнера форм. Если ни одна группа не помечена тегом формы, то форма будет создана автоматически.
  • #img — этим тегом можно пометить текстовый слой (Type Text Tool Layer). В этом случае текст будет сверстан как изображение. При этом в качестве альтернативного текста изображения (alt) будет задан текст слоя.
    Если пометить этим тегом фигуру, то она будет растеризована и сверстана как изображение, а не как CSS3 код.
  • #jpg — изображение данного слоя будет сохранено в JPEG формате вместо PNG формата, даже если изображение содержит прозрачные пиксели. Так как JPG формат не поддерживает прозрачность, прозрачные пиксели будет заменены содержимым нижележащих слоев. Используйте этот тег с осторожностью.
    Помните, что если слой не содержит прозрачных пикселей, то он будет сохранен в JPG формате автоматически. Таким образом, не надо помечать слои данным тегом без особой на то необходимости.
  • #gif — изображение данного слоя будет сохранено в GIF формате. Подробнее.
  • #text — текстовый слой, помеченный данным тегом, будет сверстан как текст в независимости от того, использует ли текст нестандартный для web шрифт или слою заданы недопустимые эффекты (т.е. отличные от Drop Shadow и Color Overlay). В данном случае текст будет перенесен в CSS верстку сайта без эффектов. При использовании нестандартного шрифта ответственностью пользователя будет добавить в HTML верстку описание этого шрифта с помощью @font-face. Заметьте, что на скриншоте web верстки сайта текст будет рисоваться шрифтом по умолчанию.
    Если в вашем макете много текстовых слоев с нестандартными шрифтами, вы можете воспользоваться опцией «Конвертировать ВСЕ текстовые слои в текст» при конвертации PSD файла.
  • #skip — любой слой или группа слоев, помеченная данным тегом, будет пропущена и не попадет в верстку. Удобен при создании списков. Внимание! Используйте с осторожностью.
  • #uladvanced tag . Применяется только к группе элементов (Layer Group). Из группы будет сверстан маркированный список ul. Все элементы данной группы станут элементами li этого списка. Внимание! Все слои с изображением маркера списка должны быть помечены тегом #limage (на самом деле, в качестве маркера будет взят первый встреченный элемент, помеченный этим тегом. Остальные будут пропущены). Это необходимо, чтобы изображения маркеров не стали элементами списка! Иногда в дизайн-макете все маркеры объединены в один слой. Чтобы облегчить себе работу, создайте слой с одним маркером (к примеру, для первого элемента списка). Пометьте его тегом #limage. Слой с оставшимися маркерами пометьте тегом #skip (тогда этот слой будет просто пропущен).
    Вы можете ознакомиться с использованием тега #ul для верстки горизонтального и вертикального меню на примере образцового PSD макета и сконвертированной из него верстки сайта).
  • #limageadvancedtag . Имеет смысл только для элемента внутри группы, помеченной тегом #ul. Первый встретившийся внутри группы элемент, отмеченный этим тегом, будет использован в качестве изображения маркера списка. Остальные элементы, помеченные этим тегом, будут пропущены.
  • #flex — если слой или группа помечены этим тегом, то сервис попытается сделать его ширину (а также ширину родительских и дочерних элементов) резиновой, т.е. их ширина будет задана в процентах от ширины родительского элемента.
  • #fix — если слой или группа помечены данным тегом, то сервис сделает его (ее) ширину фиксированной, т.е. ширина будет установлена в пикселях.
  • #min-width<[width]>, #max-width<[width]>
    где [width] это одно из:
    — значение в пикселях. Пример: #min-width <1000>или #min-width<1000px>
    — значение в процентах. Пример: #max-width
  • #min-height<[height]>, #max-height
    где [height] это одно из:
    — значение в пикселях. Пример: #min-height <1000>или #min-height<1000px>
    — значение в процентах. Пример: #max-height
  • #normal, #hover, #visited, #active, #selected — теги для верстки различных состояний текста, изображений, форм. Подробнее об их использовании читайте в статье.
  • #table, #thead, #tbody, #tfoot — используйте данные теги для верстки таблиц. Подробнее читайте в статье о верстке таблиц.
  • #pos_fixed — отметьте слой или группу слоев этим тегом, чтобы сверстать их, используя фиксированное позиционирование (CSS стиль «position: fixed;»).
  • #absolute — отметьте слой или группу слоев этим тегом, чтобы вынести их из общего потока документа и сверстать, используя абсолютное позиционирование (CSS стиль «position: absolute;»).
  • #hide — отметьте слой или группу слоев этим тегом, чтобы сверстать их невидимыми (CSS стиль «display: none;»).

Примеры

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

Группировка CSS слоев в div блоки

Каждая группа слоев (Layer Group) в Photoshop конвертируется в div блок в результирующей HTML/CSS верстке.

Объединяйте логические группы элементов (такие, как заголовок, футер, основной контент, колонки и т.п.) в группы слоев (Layer Group) в Photoshop. Это поможет нам правильно объединить CSS элементы в гибкие div блоки HTML (таким образом, если кто-то добавит больше текста, ничего не испортится). Элементы будут сгруппированы в колонки и ряды, в которых выравниваться и располагаться друг относительно друга они будут используя такие css свойства, как ‘margin’, ‘padding’, ‘float’.

Использование «плавающей» верстки является наилучшим практически для любого сайта. Если элемент CSS верстки изменит свой размер (например, добавится еще один параграф текста), то при HTML вёрстке в абсолютных координатах текст «наедет» на соседние блоки. В «плавающей» же CSS верстке, расширившийся блок «подвинет» блоки, которые с ним граничат.

Photoshop CS4 (и более ранние версии) имеет ограничение на уровень вложенности групп (Layer Group) равное 5-ти. В Photoshop CS5 оно было увеличено до 10-ти. Такого количества вложенных групп вполне достаточно для большинства дизайнов любой сложности.

Группировка элементов не только поможет сверстать Ваш дизайн-макет более правильно, но и облегчит Вашу работу с макетом. PSD дизайн намного легче и удобнее модифицировать, когда все слои логически объединены в группы.

SEO (Search Engine Optimization)

Чтобы поисковые системы успешнее находили Вашу HTML страницу в интернете, на ней следует задать значения таким мета тегам, как title, description, keywords.

Сервис CSS верстки Psd 2 Html Converter поможет автоматически добавить эти мета теги на Вашу страницу. Откройте форму информации о PSD файле (нажмите ‘Alt + Shift + Ctrl + I’ или в меню ‘File’ выберите пункт ‘File Info. ‘ и выберите вкладку ‘Description’) и заполните поля ‘Document title’, ‘Description’, ‘Keywords’. Информация из этих полей автоматически попадет на сверстанную HTML/CSS страницу в качестве соответствующих мета тегов.

Для поисковой оптимизации важно следить за тем, чтобы информация на HTML странице была правильно структурирована. Текст HTML страницы состоит из заголовков различного уровня (в HTML таких уровней 6) и собственно из основного текста. Чтобы создать правильную структуру HTML документа, воспользуйтесь тегами #h1, #h2, #h3, #h4, #h5, #h6. Как понятно из названий, при их использовании будут созданы заголовки 1, 2, 3, 4, 5 или 6 уровня. Чем ниже уровень заголовка, тем он важнее. На правильно сформированной странице заголовки должны быть расположены сверху вниз в порядке возрастания уровня (т.е. уменьшения важности).

Порядок загрузки файла и оплаты конвертации

Процесс загрузки PSD макета, его конвертации в HTML/CSS верстку и оплаты состоит из нескольких шагов.

  1. Выберите предлагаемые опции конвертации.
  2. Загрузите файл на наш сервер. В зависимости от размера файла загрузка и конвертация может длиться разное время, вплоть до 10 минут.
  3. При наличии каких-либо замечаний к подготовке PSD файла, мы предложим Вам с ними ознакомиться. Рекомендуем исправить все замечания к подготовке макета и вернуться к пункту 1. Если замечания не исправлены, CSS верстка может не соответствовать загруженному дизайн-макету.
  4. Перед оплатой Вам будет доступен предпросмотр получившейся CSS верстки сайта (скриншот страницы), а также предпросмотр сгенерированного HTML кода. Ознакомьтесь с ними и только если Вас все устраивает, переходите к оплате.
  5. Если Вы вошли под свои аккаунтом и на Вашем счету есть доступные конвертации, будет предложено воспользоваться конвертацией со счета.
  6. Если Вы не вошли под своим аккаунтом, либо на Вашем счету нет доступных конвертаций, будет предложено воспользоваться одним из способов оплаты.
  7. При успешной оплате Вы будете перенаправлены на страницу загрузки CSS верстки сайта. На Ваш e-mail будет отправлено письмо с информацией о конвертации. Если Вы авторизованы, информация о конвертации станет доступна из личного кабинета.

Блочная верстка сайта — html и css, и почему начинающим повезло больше, чем тем кто верстает уже давно

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

Сегодня поговорим про то, что такое html блочная верстка и css. Магический язык программирования станет менее страшен. Надеюсь, что к концу статьи вы научитесь уже видеть кое-какие элементы кода и сможете принять для себя твердое решение стоит ли вам во все это ввязываться.

Почему вам повезло больше, чем верстальщикам, начавшим работу уже давно

Существует два типа верстки: блочная и табличная. На заре времен верстка строилась в виде таблиц. Сперва создавалась всего одна, большая.

В нее встраивался head – голова, основная часть. Та, в которую входит логотип, какая-то основная информация типа телефонов и так далее.

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

Далее врисовывалось основное меню для перехода по категориям.

Основная контентная часть. Текст статьи, вводное приветствие или что-то иное.

Внизу размещается футер. Его используют и сейчас. Сюда, как правило, вставляют небольшие ссылочки на контакты, вакансии, информацию «О нас». Могут прилепить даты существования ресурса или просто магическое слово «copyright», которым разработчики надеются указать или защитить свое авторское право. Пользы от него как от подковы, висящей над дверью, может отпугнуть только вурдалаков, хотя они, как правило, в футер и не заглядывают.

Чуть позже появились новые стандарты. Табличную верстку заменила блочная. Тег «div» — это и есть блочная верстка. Можете посмотреть код любого сайта. Кликните правой кнопкой мыши и выберите «Просмотр кода элемента». Взгляните на мой скриншот. Тут есть блок главной страницы, футера, левой и правой колонки. Все они подписаны.

Современные сайты строятся из блоков, покажу схематично пример, чтобы вы понимали. Разница тут скорее в коде страницы. Видите, никакой основной таблички нет. Блоки, размещенные в той или иной части. Иногда они могут заходить друг на друга или сочетать в себе несколько элементов, но один лишний элемент (большая таблица) исчез.

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

Пошаговая инструкция: как делаются сайты

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

Более 80% людей просто смотрят на непонятный набор символов, вспоминают школьную программу по математике: логарифмы, дифференциалы – сходят с ума, пугаются и забывают об этой теме: «Пойду лучше китайский выучу, оно-то проще будет».

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

Давайте теперь посмотрим как происходит сотворение сайта. Сначала дизайнеры работают в Photoshop. У них получается примерно такая вот картинка. Пока это всего лишь фотография, однако, у нее есть свои отличия.

Она изготавливается в особом фотошоповском формате, типа блокнотного txt или вордовского doc. Из psd, так называется этот формат, раскраиваются блоки. Для этого есть специальная кнопка в меню слева.

После того как документ раскроен. Его можно «Экспортировать для web» и в результате на компьютере появляется папка images, которую верстальщик использует для распределения картинок по сайту.

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

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

Ваш первый сайт. Верстка займет всего пять минут

Над самой версткой можно работать в программе Notepad++. Сегодня я не буду затрагивать программу Adobe Dreamweaver, т.к. это тема отдельной статьи, но отмечу, что она как раз создана для верстальщиков.

Работы над сайтом обычно не начинаются с создания файла style.css, но думаю что так вам будет интереснее. Это основной документ, в котором описывается как именно будет выглядеть ваш портал. Все просто. Даже английский учить не обязательно.

Background – это цвет фона.

Кликнув два раза в Photoshop по цветовой палитре вы можете узнать и другие цвета.

Вот так будет выглядеть html документ с текстовой составляющей. Уже знакомые меню, тела и контейнеры… тег h2 тоже должен быть вам знаком. Это заголовки. Впишите в них свои слова.

Скачайте эти два документа в одну папку и откройте с помощью Notepad ++, затем отредактируйте цвет и текст, а затем запустите index.html с любого браузера (скачать).

Получится примерно такой вариант.

Поздравляю. Это ваша первая страница в интернете! Вы сделали ее, у вас получилось. Естественно, что вместо цвета можно вставить и картинку, которая была вырезана из фотошопа в документ images. Для этого нужно просто прописать путь. Как вы видите, ничего супер сложного тут нет.

И напоследок… качаем видео уроки

Как я вам уже говорил, самое сложное в верстке – это найти хорошие обучающие материалы. Сам я начинал с книг и только через две недели смог сделать свой первый индекс-файл. Чтобы вы понимали, без таблицы стилей (css) она будет выглядеть вот так.


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

  1. Html — уроки для начинающих.
  2. Css — уроки для начинающих.
  3. Бесплатный мини-курс по вёрстке сайта.

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

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

Работа с картинками (изображениями) в CSS

2013-03-01 / Вр:23:32 / просмотров: 103400

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

Фоновая картинка.

background | background-image

Если вы хотите добавить фоновую картинку на веб-страницу, воспользуйтесь стилевым свойством background, который задается к селектору body. Задайте путь к изображению внутри значения url.

Как выбрать графический путь? Графический путь будет зависеть от того, где он располагается.
Например, если HTML-файл и фоновый рисунок с именем bg.gif хранятся в одной папке, то достаточно задать url(bg.gif), если фоновый рисунок хранится в папке images, тогда путь будет вот таким url(images/bg.gif).

Совет: учтите, фоновое изображение загружается не сразу, поэтому рекомендую добавлять к фоновому изображению цвет фона, так как цвет загружается моментально. Задайте цвет фону близкий к цвету фонового рисунка.

Повтор фоновой картинки.

background-repeat

Бывают моменты, когда нам необходимо управлять повторами фонового изображения. Например, нам выгодно, чтобы повтор фонового изображения был только по горизонтали или только по вертикали, а бывает момент, что повтор фонового изображения нам вообще не нужен. Итак, как нам выкрутиться в этой ситуации? Воспользуйтесь стилевым свойством background-repeat.

background-repeat: repeat-y | repeat-x | no-repeat;

repeat-y — повтор фонового изображения по оси — у (вертикаль);
repeat-x — повтор фонового изображения по оси — х ( горизонталь);
no-repeat; — запретить повтор фонового изображения (изображение будет как оно есть);

Если не задать стилевое свойство background-repeat, тогда фоновое изображение веб-страницы будет залито полностью фоновой картинкой.

Как добавить две фоновые картинки на веб-страницу.

background

Бываю такие моменты, когда нам необходимо создать два фона для сайта. Например, один фон повторяется по вертикали или по горизонтали, а второй фон выводится без повторения.
Добавим две фоновые картинки старым добрым способом. По крайне мере я знаю точно, все браузеры отображают этот метод.
Зададим фоновое изображение к элементам — HTML и BODY.

Картинка по центру.

Существуют несколько методов установить картинку по центру.

Как в css изменить размер картинки.

background-size

Не зависимо от оригинала картинки, размер можно менять от меньшего до большего. В CSS для изменения размера картинки поможет свойство background-size.
В свойстве background-size могут применяться абсолютные единицы измерения, такие как px, em, cm и др..

По умолчанию ширина и высота установлена как auto, что оставляет исходные размеры изображения.

Например, вы загрузили на сайт картинку размерами 200×200 px, но вам по каким-то причинам нужно ее увеличить до размера 500×200 px . Вот так будут выглядеть параметры background-siz.

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

а можно вот так:

Обтекание (выравнивание) картинки текстом.

float

Как сделать в CSS так, чтобы на странице изображение обтекало текстом? Выравнивание картинки в CSS аналог HTML-выравнивания картинки , вот только в CSS по какой стороне будет выравнивание элементов определяет float.

float: left | right | none ;

left — выровнять картинку по левому краю, текст обтекает его по правой стороне.

right — выровнять картинку по правому краю, текст обтекает по левой стороне.

none — выравнивание и обтекание не задается (значение по умолчанию).

Здесь я указал отступы текста от картинки

Тень картинки.

box-shadow

Небольшая тень под картинкой придает также странице эффект трехмерности, объёма и глубины. Для добавления тени используется свойство box-shadow.

1. — inset — тень внутри элемента, без inset тень будет наружу;
2. — сдвиг тени по горизонтали (6px — вправо, -6px — влево);
3. — сдвиг по вертикали (6px — вниз, -6px — вверх);
4. — размытие тени (0 — четкая тень);
5. — растяжение тени (3px — растяжение, -3px — сжатие);
6. — цвет тени

box-shadow: 0 0 5px; — тень вокруг элемента

box-shadow: inset 0 0 5px; — тень внутри

Прозрачность картинки.

Начну сразу с примера.

Обратите внимание в коде на opacity:0.4 . Поиграйтесь со значением этого свойства и вы увидите на сколько увеличивается или уменьшается прозрачность картинки.

С наилучшими пожеланиями Webmasterok2009

HTML & CSS: как не надо

Верстка форм

Не используйте для разметки групп инпутов div и h1-h6 #

Для разметки групп полей есть более подходящие теги: fieldset и legend . Они не только внесут разнообразие в код, но также сделают вашу форму более доступной. А как надо? #

С чистыми fieldset и legend могут возникать затруднения при стилизации и позиционировании контента, но это легко решается дополнительными обёртками.

Например, так как fieldset используется для групп полей, а у каждого поля есть лейбл, каждой паре input + label обычно требуется обёртка, и здесь можно удобно использовать ненумерованные списки ( ul ). После этого можно всё позиционирование делать для списка и его элементов, и с раскладкой больше не будет никаких проблем. Чтобы вместе с инпутом не читалась информация об элементах списка, его нужно скрыть от скринридеров, задав role=»none» .

legend ведёт себя своеобразно, но его можно вырвать со своего места с помощью float: left , а для позиционирования текста внутри legend завернуть текст в спаны.

Не используйте legend вместо label #

В некоторых макетах можно увидеть, что название для textarea выглядит как legend , и возникает соблазн поместить textarea в fieldset , а название поля поместить в legend .

Это будет не самым правильными решением, потому что у всех инпутов должны быть лейблы. Если добавить скрытый лейбл, его содержимое будет дублировать уже имеющийся legend , и всё это вместе будет выглядеть довольно странно.

Как это увидеть? #

Посмотрите на форму без стилей:

Для одиночного текстового поля не нужны fieldset и legend , они для групп полей. Если такому полю требуется обёртка, можно использовать div . Название поля нужно поместить в label .

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

Теперь ничего не дублируется:

Не используйте display: none для скрытия инпутов #

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

Как это увидеть? #


Установите фокус в первое поле и перемещаясь по форме с помощью Tab и стрелок попробуйте выбрать цвет кота:

Ничего не получится, с клавиатуры выбор цвета недоступен.

Для скрытия инпутов используйте класс .visuallyhidden :

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

Попробуйте теперь с помощью Tab и стрелок выбрать цвет кота (чтобы выбрать цвет нажмите пробел):

Пример верстки CSS

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

Пример опирается на предыдущие статьи «Учебника», и если в этой статье будут какие-то неясности, ответы надо искать в них. И хотя пример может быть полезен и сам по себе, как просто готовый шаблон, главная его цель — показать в действии все механизмы CSS, о которых я писал раньше, дать их почувствовать, чтобы вы могли их свободно применять так, как это нужно вам.

С места в карьер — вот то, что получится в результате:

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

Содержимое

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

  • Шапка с названием компании
  • Основное содержимое страницы:
    • Собственно текст
    • Навигация
      • Меню разделов
      • Поиск
    • Новостная колонка
  • Мета-информация о странице: всякая мелочь вроде копирайтов и контактных email’ов.

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

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

Вот меня спрашивают, зачем там на странице «рингтоны». Откуда я знаю? Все продают рингтоны, почему мы не должны!?

Валидация

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

Моя точка зрения на относительную бесполезность валидации, возможно, достаточно экстремальна для учебника, поэтому я решил, что эта страница должна таки быть валидной по стандарту HTML 4.01 Strict. Это можно проверить валидатором на W3C.

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

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

Верстка

По ходу всей верстки я буду давать ссылки на страницы, которые показывают до чего мы дошли к данному моменту. Но для получения максимального удовольствия я рекомендую делать верстку непосредственно у себя на компьютере по ходу чтения. Скачайте HTML-файл, графику и создайте рядом пустой файл «style.css». Или сразу скачайте весь архив всех шагов.

Организация

Первое, о чем стоит подумать — это организация CSS. Его можно написать множеством способов, среди которых самый плохой — это пихать все подряд в один файл в порядке «как придумалось». Это очень быстро приводит к состоянию, когда, чтобы понять, как, скажем, убрать такой-то отступ, приходится прочесывать файл вперед и назад много раз. Поэтому стилевые правила надо как-то группировать.

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

Есть другой способ группировки — когда рядом находится то, что приходится часто одновременно менять:

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

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

Раскладка

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

Установка ширины очевидна, а margin и padding могут вызвать вопросы. Дело в том, что для совместимости браузеры ставят для отступы по умолчанию. Причем, одни через margin, а другие — через padding. Чаще всего эти отступы не нужны, и их обнуляют. Но поскольку нам нужно центрирование, правая и левая margin устанавливаются в auto.

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

Еще одна вещь. Очень, очень часто верстальщики игнорируют элемент напрочь, и вместо этого работает как фоновый элемент, а внутрь него вставляется лишний

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

Разложим колонки. Для этого можно воспользовать либо абсолютным позиционированием, либо float’ами. Но позиционирование нам, очевидно, не подойдет, потому что высота сайта у нас не фиксирована, а зависит от содержимого. Поэтому — float’ы.

Напомню, в статье про float’ы я описал два механизма их построения: в одном float’ятся все колонки, а в другом одна колонка остается статической. Смысл этого второго варианта проявляется при изменении ширины колонок, но у нас ширина всей страницы фиксирована. Зато второй вариант не дает менять колонки местами. А вот это нам как раз понадобится.

В HTML блоки, которые мы хотим превратить в колонки идут в таком порядке:

  1. главная колонка («main»)
  2. разделы сайта («sections»)
  3. новости («news»)

. а разложить их надо так, чтобы первые две поменялись местами: «sections» слева, а «main» — в середине. Для начала всех их надо заfloat’ить и задать им ширину:

Теперь перестановка. Помимо позиционирования в CSS есть еще один способ двигать блоки — margin. Чтобы переставить местами «main» и «sections» мы добавим слева первой положительный margin, а второй — отрицательный. Главное — их посчитать.

С «main» все просто: она прижата к левому краю, и ее достаточно сдвинуть на ширину «sections» — 20%. Сама же «sections» стоит справа «main», а значит от левого края ее сейчас отделяет и ширина «main», и отступ в 20%, который мы только что добавили. В итоге, ее надо двигать влево на 20% + 55% = 75%. Промежуточный итог:

Промежуточный, потому что у нас есть Internet Explorer, в котором есть баг, который у float’ов, прижатых к краю, удваивает границу, заданную от этого края. Поэтому наши margin-left:20% , заданные колонке «main» превращаются в 40% и ломают всю раскладку. Чтобы это устранить, специально для Internet Explorer’а добавляется отдельное правило с границей, уменьшенной в два раза:

Тут вся соль — в добавленном * html . По правилам CSS вся эта конструкция ( * html #main ) не должна подходить к элементу «main». Но IE — единственный браузер, у которого это не так, и он это правило воспринимает так же, как просто #main . Вот поэтому этот факт широко используется для того, чтобы писать правила, нужные только для IE. Такое, вот, удачное совпадение багов :-).

Последний штрих, который нам нужен для колонок — это сделать так, чтобы элемент «meta» отодвигался под самую длинную колонку. Для этого у нас удачно есть элемент «content», в котором все три колонки лежат. Сделаем, чтобы он их охватывал (все подробные объяснения — в статье про float’ы):

Все уже начинает занимать нужные места. Следующий шаг — сдвинуть форму поиска. Она сейчас висит в левой колонке, а нам хочется видеть ее в заголовке справа вверху. Для таких радикальных перестановок подходит абсолютное позиционирование:

В установке margin:20px нет никакой магии, это просто для красоты.

Но это не все. Дело в том, что таким образом форма отнесется к верхнему правому краю окна, а не 700-пиксельного . Чтобы контейнером для позиционирования считался , надо сделать из него «стакан», который я описывал в статье про позиционирование. Оттуда же и рецепт:

Вот теперь форма будет располагаться в правом верхнем углу , как раз в зоне заголовка.

Но все равно не совсем там, где надо. У всей нашей раскладки есть еще одна большая проблема, и чтобы увидеть ее наглядно, стоит просто временно раскрасить основные блоки страницы фоновыми цветами:

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

Это проявления вываливания границ элементов

(в заголовке) и

(в подвале). Я его описывал в статье про границы в потоке. Давайте от него избавимся:

Одна маленькая деталь. В первом случае я просто обнулил margin у

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

. Почему именно так — расскажу дальше.


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

Что нам еще нужно от раскладки — так это один замечательный эффект, который придаст ей более завершенный вид. Если на странице мало текста (попробуйте просто уменьшить шрифт в браузере на пару размеров), то видно, что подвал начинается сразу после текста, и за ним до конца окна много пустого пространства. Это некрасиво. Хочется, чтобы короткая страница занимала всю высоту окна, а подвал всегда прижимался к нижней кромке страницы.

Переведем это все с русского языка напрямую на CSS:

Но это, конечно, только начало.

Во-первых, значение 100% для означает «100% от высоты родителя». Родитель — , но у него высота не задана вообще, и браузер не в состоянии посчитать эти 100%. Поэтому придется добавить еще правило:

У родителя нет (самый верхний элемент в иерархии), поэтому его 100% берутся от высоты окна, которую браузер всегда точно знает.

С min-height есть еще одна проблема: этого свойства не понимает IE. Однако нас спасет еще один его баг: свойство height обрабатывается неверно и работает как раз, как должен работать min-height . Поэтому воспользуемся знакомым фильтром:

Следующая проблема — абсолютно позиционированный подвал. Он, конечно, замечательно будет висеть внизу, но он больше не находится после блока содержимого, а изымается из общего потока страницы и висит над ним. А это означает, что на длинных страницах текст будет беззастенчиво подлезать под подвал. Чтобы этого не происходило, мы добавим после колонок страницы гарантированное пустое пространство, над которым подвал и будет висеть.

Сделать это, в общем-то, просто: поставить блоку с колонками («content») нижний padding. Вопрос в том — сколько. Сейчас точная высоты подвала неизвестна, она определяется текстом в нем. Однако мы вполне можем предполагать, что в блоке для всякой мелкой мета-информации не должно быть слишком много текста. Поэтому мы просто зарезервируем под нее достаточно места. Скажем, 40 пикселов. Все это выливается в такие правила:

42 пиксела снизу «content» — это 40 пикселов высоты подвала и по 1 пикселу его padding’а.

Раскладка готова. Посмотрим на результат.

Шрифты

Для меня одно из самых мешающих ощущений при подготовке раскладки это то, что из-за крупных и неказистых шрифтов она, даже когда готова, выглядит как команда биатлонистов в горбатом Запорожце (с лыжами и винтовками, разумеется). Поэтому следующее, что мы сделаем — настроим шрифты.

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

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

Итак, основной шрифт:

На этой записи стоит остановиться подробно. Свойство font — это сборное свойство для нескольких шрифтовых свойств, точно так же, как, например, свойство margin задает установку всех четырех margin-top , margin-right , margin-bottom , margin-left .

У font структура чуток сложнее, но если исключить экзотику, то оно выглядит так:

Значения можно пропускать, но не менять местами. Таким образом, наш » font:10pt Tahoma, Sans-Serif » переводится на русский язык как «некрусивная нежирная Tahoma размером 10 пунктов». «Sans-serif» означает, что если шрифта Tahoma на компьютере не будет, браузер возьмет шрифт, который у него в установках назначен как шрифт без засечек.

Дальше идем по блокам страницы и меняем шрифты. Шапка, потом заголовок внутри главной области страницы:

Обращаю внимание, что при изменениях какой-то одной характеристики шрифта уже нельзя пользоваться свойством font , потому что оно задает весь шрифт полностью. » font:180% » означает «некурсивный нежирный шрифт по умолчанию размером 180%», и наша установка гарнитуры Tahoma тут собьется.

Установка letter-spacing:1px увеличивает на один пиксел расстояние между буквами. Это чисто стилистическая штука, мне показалось, что так заголовок выглядит более э-э-э. амбициозно! Это значение может быть и отрицательным — тогда буквы будут стоять плотнее.

Дальше зададим одинаковые шрифты для левой и правой колонок и их основных заголовков:

Тут стоит обратить внимание на размер шрифта в заголовках. Проценты размера шрифта всегда считаются от размера шрифта родителя. Поэтому 125% здесь берутся не от 10pt основного шрифта, а от шрифта блоков «news» и «sections». Его даже нетрудно посчитать: 80% от 10pt — это 8pt. 125% от 8pt — это 10pt.

Определим остальные шрифты, тут уже нет никаких загадок:

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

Цвета и декор

Нам осталось расцветить страницу. Помимо собственно цветов в этот же этап я объединил еще и декор: графические украшательства, градиенты, рамки, а также отступы вокруг текста. Хоть цвета и декор — вещи разные, я рекомендую их делать одновременно, так просто удобней. Однако я все же буду разносить их в разные части CSS-файла для того, чтобы оставить на будущее возможность управлять цветами отдельно.

Заголовок и подвал

Начнем с заголовка и подвала, потому что они покрашены почти одинаково: белый цвет текста на синем фоне. Только у заголовка есть еще и градиент. Еще туда же приплетается форма поиска, потому что визуально она сидит в заголовке.

На примере заголовка расскажу про свойство » background «. Это тоже сборное свойство (как font ), и оно задает такие параметры:

Все параметры можно пропускать и можно даже менять их местами.

Градиент нарисован на картинке размерами 10х50:

Она располагается в левом верхнем углу (» left top «) и повторяется по горизонтали (» repeat-x «).

Обратите внимание, что картинка градиента по высоте не закрывает весь блок заголовка. Для того, чтобы там не зияла пустота, в свойстве background указан еще и цвет (#45F), который появляется везде, где картинки нет (а также в прозрачных областях картинки, если они есть). Цвет этот выбран, конечно, совпадающим с нижней частью градиента.

Формат цвета с тремя цифрами #45F — это сокращенная запись, эквивалентна значению #4455FF

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

, который вложен в блок заголовка.

Очень удобно, что он полностью заполняет «title», не оставляя вокруг себя свободного места. Так вышло как раз потому, что когда мы устраняли проваливание границ, то заменили все margin’ы вне

на padding’и внутри

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

Вот сама картинка логотипа:

Пара пояснений. Картинка располагается точно в левом верхнем углу для того, чтобы ее градиентный фон визуально сливался с фоном блока «title». Если бы их расположение не совпадало, совместить градиенты было бы проблемой.

Отступ в 60 пикселов — это фактически место под картинку. Это очень распространенный способ навешивания оформительских картинок рядом с элементами: назначить картинку фоном и подвинуть содержимое padding’ом.

Осталось привести в порядок форму поиска. Она должна быть слегка поменьше. Чтобы добиться этого эффекта мы уберем у абзацев внутри нее все отступы и уменьшим текстовое поле:

Заголовок и форма выглядят слегка плохо в IE и, на этот раз, еще и Опере. Сначала разберемся с первым.

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

Высота тут, конечно, ни при чем. Это просто одно из свойств IE, которое в данном случае не оказывает никакого прямого действия, зато «чинит» странное поведение блоков. Еще такими же «целительными» свойствами обладают width:100% , position:relative , zoom:1 . Этот метод называется «holly hack».

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

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

Но теперь кнопка некрасиво прижимается к текстовому полю. Отодвинем:

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

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

Осталась здесь последняя мелкая стилизация — уменьшить отступы между абзацами в подвале. Тут все совсем просто:

Колонки

Под колонками у нас есть сложный узор — градиент и пунктирные линии, поэтому проще всего использовать для их визуализации метод «faux columns», на который я ссылался в статье про float’ы. Для этого делается фоновая картинка шириной 700 пикселов, на которой рисуются градиент и пунктиры по ширине колонок (140 пикселов левая колонка, 175 — правая).

А затем задается фоном к с повторением по вертикали:

. (заодно тут же и цвета фона и текста).

Совсем не похоже. Фон, который мы назначили центрированному 700-пиксельному лежит не в в нем, а прижался к левому краю. Это новые браузеры делают для совместимости со старыми браузерами доCSSной эры, когда фон и фон окна считались одним и тем же.

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

Для фона окна я обожаю фоновые узоры :-). Кроме того, в последнее время это, кажется, модно.

Отсутствие всяких » left top no-repeat » означает «заполнить все». При этом цвет #EEE вообще не будет виден, потому что картинка узора полностью непрозрачна (серая по белому). Но он будет виден тогда, когда картинка узора еще не загружена или если в браузере отключены картинки. Сам оттенок подобран так, чтобы примерно походить по насыщенности на узор.

Вот теперь колонки должны выглядеть прилично.

Левая колонка

Для начала, мне подумалось, что заголовок «Разделы» в левой колонке будет лишним (эдакий дизайнерский ход). Поэтому он просто убирается:

Следующий объект стилизации — меню. Оно задано списком

    и оттого сдвинуто вправо и имеет буллиты у каждого пункта. Нам всего этого не надо:


list-style:none отключает буллиты, а всевозможные отступы и границы мы полностью переопределяем: с боков их нет, а сверху и снизу списка есть по 50 пикселов. Задание одновременно и margin’а, и padding’а нужно для того, чтобы убрать отступы по умолчанию, которые разные браузеры задают кто через одно, кто через другое.

Разобравшись с отступами, расцветим сами элементы:

На что тут обратить внимание:

Тут нас традиционнно подводит IE, у которого вертикальное расстояние между элементами списка сильно больше, чем надо. Это похоже на какие-то лишние отступы, и чинится уже знакомым «holly hack’ом»:

Колонка новостей

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

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

Тут может возникнуть вопрос, почему отступ по краям внутри колонки задается ее внутренним элементам, а не самой колонке? Во-первых, потому что одному из элементов — главному заголовку новостей (

) — этот отступ не нужен. А во-вторых, если колонке, которой задана ширина, проставить отступы, то они ее расширят, она перестанет умещаться в оставленные ей в раскладке 25%, и раскладка сломается.

Это, можно сказать, правило: надо всеми силами избегать назначение декоративных отступов и рамок главным блокам раскладки. Иначе замучаетесь отлаживать.

У нас остались две маленькие проблемы в этой колонке. Первая — вспомним, что IE удваивает отступ для float’ов, поэтому даты новостей слегка смещены дальше, чем надо. Быстро чиним:

Другая проблема в том, что дата первой новости прилипает к низу общего заголовка новостей. Вообще-то, так и должно было произойти, потому что ни у заголовка, ни у даты нет вертикальных margin’ов. У других дат такой проблемы нет, потому что перед каждой из них идет абзац (

), у которого и снизу, и сверху есть margin в 20 пикселов.

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

После всего проделанного, думаю, правила для ссылок «Подробнее. » со стрелочкам в объяснениях не нуждаются::

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

Главная колонка

В главной колонке дел совсем немного. Стили заголовка и абзацев простые:

Ну и иллюстрацию слегка облагородить: сдвинуть влево и добавить рамочку фирменного синего цвета. Чтобы не делать единый стиль для любых картинок в тексте (у них ведь может быть разное назначение), я заранее назначил этой картинке отличительный признак — класс с названием «picture». И в CSS мы будем стилизовать именно его:

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

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

Эта статья — часть находящегося в процессе написания цикла под рабочим названием «Учебник». Я рекомендую ознакомиться и с другими статьями, которые можно найти в категории «Учебник», где они сейчас собраны в обратном хронологическом порядке.

Комментарии: 114 (особо ценных: 1)

Фиксаж все-таки. Не самая интересная задача, имхо.
Хотя новичкам будет полезно.

Спасибо. Очень интересный урок!

Молодец! Это прекрасный урок для начинающих. Подробно не читал, но финальный код очень ясный — как раз то, что нужно. Рунету так не хватает любителей стандартов и CSS!

Надеюсь, благодаря этой статье их станет больше. Большое спасибо! Теперь интересующихся буду сюда отправлять, а то сразу на CSS Zen Garden и A List Apart — это слишком жестко для полного новичка. :-)

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

Двойной margin при флоате в IE можно еще исправить, указав блоку display: inline.

Порядком удивлен был. Пытался представить пол-пикселя. Много думал.

Между тем, в полпикселе ничего странного нет :-). В CSS пиксел — это не физический пиксел устройства, а некая логическая величина. На современных мониторах она приблизительно равна физическому пикселу, а на принтере, туда точечек краски вместится чуть больше.

А в хаке вообще неважно, что это такое, главное, что это 5/2 :-)

Отличный пример. Я, как начинающий, много узнал для себя интересного. Оказывается

и
можно не закрывать.
И вообще — просто и понятно про CSS. Такого бы побольше.

Смотря на сорс без боди хеда чувствую себя неуютно. Хотя выглядит красиво. Как такое будут отображать разные браузеры? Мобильные? Понравится ли поисковикам? (риторические вопросы в пустоту, отвечать не надо :)
Кажется мне, что приучая незакрывать теги Вы, Иван, учите плохому. Не уж то все вокруг зря парятся по-поводу совместимости с XHTML? А ну прийдется накопленный контент как XML обработать? Тогда поздно будет теги закрывать!

По большому счету

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

Совсем не риторический вопрос, я ответил развернуто :-)

Спасибо, интересная статья, хотя и не новость.

Я предпочитаю не использовать хаков. Ну разве что в самом крайнем случае. Субъективно из-за того что мне их сложно все упомнить и когда пытаешься разобраться с таблицей стилей, которую делал пару месяцев назад, то уже не помнишь что к чему. Объективно же из-за того, что в 7 версии IE ранее примененные хаки могут «вылезти» в самом неподходящем месте. Где-то на блоге IE такой пример был. Меня он убедил отказаться от хаков.

Чтобы все-таки иметь возможность определять другие стили для IE я пользуюсь условными комментариями — вполне задокументированной возможностью. Внутри таких комментариев я добавляю таблицу стилей, сделанную специально для IE (причем имею возможность точно определить версию браузера). Конечно, приходится добавлять лишний код в HTML. Но я почти всегда использую шаблоны для веб приложения, куда могу вставить повторяющийся код.

Не хватает одного: Кнопочки «Версия для Печати».

font:10pt Tahoma, Sans-Serif
Задавать размер шрифта в пунктах для экранных устройств — далеко не лучший способ.

А вообще, очень полезная (и, надеюсь, понятная) для новичков статья, спасибо.

Между прочим финальный вариант сверстанной страницы все-равно некорректно отображается IE. По крайней мере в том, что установлен у меня: IE 6.0.2800. Посмотрите на ваш «подвал» или как его там — футер. Между статусной строкой и раскрашенным блоком есть дырка, сквозь которую пробивается фон body.

Статья большая и слегка неслаженная. Если писалась для новичков, то тем более необходимо описывать главные аспекты более подробно. А для 3-х колонок, тем более в таком простеньком дизайне, необязательно использовать хаки.

Согласен с Newton на счёт размера шрифта в пунктах.

Зачем в контексте данного дизайна понадобилось заключать заголовок первого уровня в div? Почему не выбрали для body font-family?

Гм. Главные аспекты описаны в предыдущих статьях цикла исключительно подробно. Этому я посвятил абзац в самом начале.

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

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

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

Font-Family для body указана — Tahoma, Sans-Serif.

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

Интересная стаья! Спасибо.
Даешь все в процентах!

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

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

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

  • убрать жесткую ширину body, заменить правую и левую границу с auto на небольшие отступы
  • разделить фон колонок на две картинки, и назначить их правой и левой колонкам, при этом сделать их максимально длинными (как я описывал в статье про float’ы).

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

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

Свёрстанная страница отказывается растягиваться на всю высоту окна в Opera8.5. Точнее она растягивается, но только один раз — при загрузке. После этого как размер окна не меняй — «подвал» мёртво сидит на одном месте. Как победить это странное поведение оперы?

h1 <
font-size:180%;
letter-spacing:1px;
>
Обращаю внимание, что при изменениях какой-то одной характеристики шрифта уже нельзя пользоваться свойством font, потому что оно задает весь шрифт полностью. “font:180%” означает “некурсивный нежирный шрифт по умолчанию размером 180%”, и наша установка гарнитуры Tahoma тут собьется.

Это понятно. Идём дальше:


#sections h2,
#news h2 <
font-size: 125%;
font-weight: bold;
text-transform: uppercase;
>

Тут стоит обратить внимание на размер шрифта в заголовках. Проценты размера шрифта всегда считаются от размера шрифта родителя. Поэтому 125% здесь берутся не от 10pt основного шрифта, а от шрифта блоков “news” и “sections”.

А вот это не понятно. Если так, то почему в предыдущем фрагменте font-size: 180% вычисляется от шрифта по умолчанию, а не от унаследованного от ?

Свёрстанная страница отказывается растягиваться на всю высоту окна в Opera8.5. Точнее она растягивается, но только один раз — при загрузке. После этого как размер окна не меняй — “подвал” мёртво сидит на одном месте. Как победить это странное поведение оперы?

Сейчас проверил в 8.51, такого эффекта не наблюдается. Видимо, был баг и его исправили.

А вот это не понятно. Если так, то почему в предыдущем фрагменте font-size: 180% вычисляется от шрифта по умолчанию, а не от унаследованного от ?

И в предыдущем тоже от унаследованного от родителя. Просто на всем пути по иерархии от до

шрифт не меняется, поэтому шрифт родителя

совпадает с умолчальным. (Если я правильно понял вопрос, конечно.)

Ваши статьи, Иван, произвели революцию в моем сознании относительно CSS.
Очень благодарен! Как же Вы вот так запросто делитесь такими бесценными знаниями и опытом. :-)

Делюсь «запросто» по двум причинам:

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

Кроме того, я все же планирую потом оформить это в книжку. Но сначала дописать надо.

Иван, спасибо за статью. И вообще за весь «Учебник» :)
С главной страницей Мегакорпорации всё понятно.
Но остаётся «вопрос новичка» (может, несколько глупый).

Стоит ли CSS-правила для всех страниц сайта (около 15 страниц на данный момент) помещать в один файл или лучше их разделить? Если разделить, то по какому принципу? Понятное дело, что «как удобней» :) Интересно, есть ли какие-то правила на этот счёт? Заранее спасибо.

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

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

Спасибо, статья (как впрочем и другие) интересная.
есть вопрос — Вы смотрели как Ваш «готово» выглядит в NN6 и Opera5?

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

Учитываю: статья полна описаниями хаков для IE6 :-). Я не ставлю четкой границы, какие браузеры поддерживать, а какие нет. Это зависит от того, для чего предназначена страница. Перечисленные NN6 и Opera5 слишком мало распространены и слишком сильно сломаны, чтобы брать их в расчет в реальности, а уж в учебном примере — тем более.

Xочу Вам выразить благодарность за ваш веблог и особенно за пример верстки на примере «Мегакорпорации». Используя Ваш пример, я смог добиться желаемого результата для своего веб сайта (заглядывать на страницу пока не стоит — новый дизайн еще в стадии доработки в оффлайне, а текущая версия создана давно и без должного внимания к CSS).

Еще раз большое Вам спасибо!

Градиент нарисован на картинке размерами 10х50″

Зачем 10, если можно 1? И при чем здесь png?

10 вместо 1, потому что есть сведения, что у IE страдает скорость отрисовки, если приходится множить однопикселные картинки. Хотя сам я замеров не проводил, но это просто давно в привычку вошло. Разница в размере копеечная совершенно.

А PNG. Вполне подходит для этой задачи. Самый рабочий формат.

png — формат-то хороший и одинаковые файлы весят меньше гифа, но отображается в msie более темным, чем есть на самом деле, поэтому приходится от него отказываться, пока ms не сделает его нормальную поддержку в своем браузере..

Особо ценный комментарий

png — формат-то хороший и одинаковые файлы весят меньше гифа

могу заверить, что это не всегда так;

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

На самом деле виноват скорее не MS IE, а Adobe Photoshop. Давно известный баг. Попробуйте сохранить файл из другого редактора (я использую GIMP) и я вас уверяю, результат будет намного лучше ;)
Подробнее о проблеме.

спасибо за ссылку, теперь использую png, когда нужно :)

Иван, хорошая статья.
Но, проблема в том, что у Вас жесткий дизайн, и Вы смогли подложить content-bg.png, в котором и левый фон есть и правый.
Но для резиновости Вашего дизайна это не подойдет.
Ведь Вы можете только один background у body задать.

Можно положить background колонкам, а их подвинуть вниз через длинный padding, как я писал в статье про float’ы.

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

Спасибо, сегодня вечером попробую

Отличный учебник, спасибо.
Это наилучшая, imho, пропаганда веб-стандартов.

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

В контексте учебного материала это не важно. Но все же «для общего развития» надо, наверное, отметить ряд проблем сайта Мегакорпорации:
— в IE5.0 отображается неправильно почти все (заголовок, контент и «подвал» занимают все окно; поиск в новостях; навигация залазит на контент и проч.)
— в Опере 8.54 нормально (заметил одну непринципиальную неточность по размеру, наверное, из-за ее механизма кэширования), но при отключении картинок границы навигации-контента-новостей разрываются в нескольких местах, фоновый цвет под навигацией тоже рвется в одном месте и появляется белая полоса (причем, не каждый раз — примерно в 90% случаев)

Мне немного непонятен откуда берётся верхняя шапка и как её подсунуть своё изображение как background? Спасибо!

В первую очередь, спасибо за цикл статей, очень интересно.

Во — вторых, на 3, 4 и 5 страницах раскладки в FireFox 1.5 почему — то появляется вертикальная полоса прокрутки. Интересно было бы узнать, почему?

Долго думал, почему у меня в MSIE лишние вертикальные отступы в некоторых div’ах. Оказалось что всё дело в разметке кода (переносы строк и табуляции). То есть:

достаточно исправить на:

Большое спасибо за статью. Очень полезная. Для меня она оказалась просто бесценной находкой.
Только есть одна проблемка. В IE5 никак не удается сделать боковые поля, и float-блоки никак не хотят выстраиваться по горизонтали, а идут один под другим.
Может быть вы сможете что-нибудь подсказать по этому поводу?

Отличная статья. Спасибо!
Так как заканчиваю небольшой app на Django, приходится пробовать этот код на сушествующем XHTML.
Так вот — все работает, за исключением мелочей.
На коротких станицах фон не дотягивает до подвала.
Новости налазят на контент. Страница дергается вправо, когда грузится окно со скроллом, и наоборот. ИЕ плющит, но я могу обойтись и без него. Что с этим сделать пока не знаю, но что-нибудь попробую придумать.

Хорошая статья спасибо вам больше за нее. По больше бы таких учебников для начинающих.
А не могли бы вы подсказать ссылки на материалы по CSS-верстке для начинающих, а может даже и книгу на русском, где все ясно и понятно как у вас!

Учебник для меня, как новичка, оказался очень полезным и интересным. Спасибо.

Есть одна закавыка со стрелочками в примере:

В Firefox-e 2.0 и в IE 7.0 они так и не появились , а в Опрере 8.53 все нормально.

Но этот фрагмент кода к стрелочкам не относится совсем. Или это о каких стрелочках речь? Которые в новостях после «подробнее»?

Прошу прощения, перепутал. :)
Вот об этом фрагменте я спрашивал:

«После всего проделанного, думаю, правила для ссылок “Подробнее…” со стрелочкам в объяснениях не нуждаются:

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

Насчет отображения в различных браузерах — это для меня архиважный вопрос, поскольку сейчас осваиваю конструктор сайтов, в котором есть механизм изменения дизайна путем правки SCC. К сожалению, сами шаблоны страниц для изменения недоступны. Но это и не предусмотрено, т.к. конструктор предназначен для работы с ним при наличии только базовых знаний о CSS. Вот здесь то и важны принципы работы с CSS, которые так доходчиво изложены в учебнике. Возможно, они помогут наконец-то разобраться мне с отображением сайта в разных браузерах (хотя бы в самых популярных). Это при условии, что инструментарий конструктора позволит это сделать. Сейчас пока что сайт выглядит, как ему положено выглядеть, только в IE. Если что получится, напишу отдельный отзыв с благодарностями автору. :)

Все же не удалось повторить в Firefox-e 2,0 и IE 7.0 последние действия в этой главе с главной колонкой. В Опере 8.53 все нормально отображается за исключением формы поиска. Как с этим бороться? Есть ли способы? Или придется смириться?

Как с этим бороться? Есть ли способы? Или придется смириться?

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

Поэтому такие вопросы решаются уже по месту, когда есть конкретная проблема, которую надо решить. А делать это удобней в форуме по Web на этом сайте.

Супер!
Я о CSS читаю 5ый день, в голове каша полная . после посещения этого сайта все потихоньку начинает становится «на свои места». Спасибо огромное :)

лучше не вешать фоновые картинки на ссылки. у ИЕ есть баг — при наведении появляются часики.

Сейчас проверил в 8.51, такого эффекта не наблюдается. Видимо, был баг и его исправили.

нет, не пофиксили. сталкивался с ним и в девятке.

Ой, спасибо, Иван!
Сидел и весь вечер вдумчиво читал статьи. Завтра опять буду :)


ЗЫ
некрусивная

ЗЫ2
В 9-ой Опере до 5 версии тестового сайта есть скролинг. В 6-й версии он пропал. Дело в фоновой картинке?

Прочитал с интересом статью, руки чешутся переделать сайты без html-table. Наверное переделаю. Спасибо за статью.

Вчера взялся с интузиазмом. Но вот проблемка — вставляю в main текст, и он его расширяет на всю длину текста. Есть ли способ с переносами?

Я понимаю — статья была расчитана на особого читателя, но все-таки опускать head нельзя, а особенно в учебнике. charset, link, style необходимы даже новичкам.

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

Господин Салагаев, а вы пробовали создавать такой же макет, только НЕ фиксированной ширины? такое вообще возможно?

Да, этому посвящена одна из следующих статей в Учебнике: Резиновая раскладка. Заодно рекомендую, как и в самом начале этой самой статьи, читать Учебник целиком, чтобы иметь верное представление о возможном и невозможном.

. Всё написано очень просто и понятно, для меня как новичка в ЦСС всё понятно. Лично я ещё не встречал в нэте страницу с подобным кодом (имееться ввиду понятным а ГЛАВНОЕ удобным). Спасибо за урок! Слышал что есть какие-то особенности когда лист стилей вынесен из общего кода (например: надо сделать фон флэшки прозрачным, прописал в коде прозрачность но она ни как не повлияла на фон флэшки и вообще на страницу, и мне посоветовали вынести стили в отдельный ЦСС-файл и тогда всё должно заработать. правда ли это?). если не трудно, расскажите как-нибудь про эти особенности если они вообще существуют! этот урок для меня и других новичков будет просто неоценимой помощью. заранее спасибо.

Статья хорошая, вопросов нет. Но какие-то тормоза при скролле очень некстати. Я не знаю, может это js вставки, в общем, лажа какая-то. А так все ок.

Спасибо большое за статью, она не потеряла актуальности. Однако для того, чтобы она приняла законченный вид, стоит всё же указать кодировку. Например, Mozilla/5.0 (Windows; U; Windows NT 5.1; ru; rv:1.8.1.11) Gecko/20071127 Firefox/2.0.0.11 при просмотре примеров постоянно раздражает неправильным определением кодировки, также и 6-ой IE. Opera 9.25 справляется лучше. Естественно, совсем помогает установка UTF маркера, но за отсутствием оного переносить статью в книгу как-то рановато.(Читаю учебник подряд, поэтому не могу узнать, насколько продвинулся бумажный вариант)

Готовый вариант почему-то отображается в разных браузерах в разных кодировках, но ни один не отображает в правильной, пока не указать вручную. IE6 полагает, что здесь cp1251, а мозилла, сафари и опера — что здесь iso-8859-5.

Вроде бы починил.

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

все очень доступно, во многом благодаря иллюстрациям! большое спасибо за статьи, успехов Вам!

Ваша работа пользуется популярностью :)

ктото уже сделал даже клон вашего сайта
http://kollibri.net

Странно, а вот я эту страницу искал, когда хотел сделать два фона на странице, сверху и снизу, но не нашел тут подобного)))

Спасибо за довольно подробный и очень легкий для «всасывания» учебник! Читаю с большим интересом, попутно тыкая «клаву», жаль катастрофически нехватает времени чтоб все это освоить так же быстро, как растет интерес.

Спасибо большое, Иван!
Для новичка самое то! Как говорится: «Респект Вам и уважуха!»

Но есть один вопрос: раз Вы уже начали говорить о том, что Всем-Известный-Браузер не «понимает» некоторых свойств CSS, то нельзя ли обобщить эти свойства в одном месте (я имею ввиду еще одну статью)? Согласитесь, неплохое бы вышло пособие новичкам в продолжение серии Ваших статей?
Отсюда и к книге недалеко ;)

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

Я такой внятной методологии не видел нигде, и сам не возьмусь ее писать, потому что Учебник у меня про теорию. Я рассматриваю инструмент, а не конкретные методики его применения. Даже эта статья — только учебный пример (с чего я ее и начал).

Иван, спасибо большое за ваш блог. Читаю с удовольствием.

Только один минус, не открывается нормально пример живой страницы в Опере. Понял, что это из-за MIME-типа. Вместо text/html сервер выдаёт длинный text/html, text/html. Это вводит Оперу в заблуждение.

Спасибо большое за статью. У меня по ходу возникла такая проблема если в ваш пример (layout-9.html) добавить теги
html и head
то, в IE7 всё растягивается на весь экран=(

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

Вопрос о правилах группировки. В CSS — файле не получается создать две отдельных записи, относящихся к одному тегу( или классу или id ), но определяющие разные свойства. Т.е., если написать в группе
/Layout/ #news < margin:20px;width:200px; >,
то в группе
/Colors/ #news < backgrond:green;color:white; >
написать уже не получиться. А как тогда группировать по свойствам, Иван?

А HTML блоки, которые мы хотим превратить в колонки идут в таком порядке:
главная колонка («main»)
разделы сайта («sections»)
новости («news»)
. а разложить их надо так, чтобы первые две поменялись местами: «sections» слева, а «main» — в середине.

Я, вроде бы внимательно читал весь ваш очень полезный учебник, Иван, но не встречал объяснения, почему при трехколоночном дизайне в HTML — файле надо перечислять колонки в одном порядке, а затем при помощи CSS менять их местами? Я пробовал располагать их в естественном порядке( т.е. с лева на право) и они прекрасно работают, только margin для средней колонки вообще убрал и проверял только в IE7.

Конечно получится. Новое определение не перекрывает целиком старое. Оно определяет конкретные правила, и если они со старыми не совпадают, то будут работать все.

Я, вроде бы внимательно читал весь ваш очень полезный учебник, Иван, но не встречал объяснения, почему при трехколоночном дизайне в HTML — файле надо перечислять колонки в одном порядке, а затем при помощи CSS менять их местами?

Нет, это не «надо», это «можно». Мой пример показывает то, что CSS позволяет (в некоторой степени) не завязываться на порядок колонок, который уже есть в HTML. Частенько это полезно.

Н-да, про png это круто. Не знал. Спасибо!

Хм. в разных броузерах страница отображается по разному, ну как так можно верстать, и зачем людей учить не правильно верстать?, я конечно не профи но знаю, что у body padding ну нужно указывать, эт о бред. :(

я конечно не профи но знаю, что у body padding
ну нужно указывать, эт о бред. :(

А здесь у body паддинг указан. Он равен нулю. А какие могут возникнуть проблемы с padding’ом у body? Если не указать — могут возникнуть различия в отображении, а если указать явно — проблем быть не должно.

в конечной верстке есть #news < color:#293499; >
по ходу текста нигде об этом не упоминается. интересно было самому заметить и добавить, но, полагаю, что для учебника лучше подправить?
зы: обучаюсь цсс с нуля по Вашему материалу, пока все замечательно. спасибо )

Текст на страницах с примерами все равно отображается кракозябрами.

Иван, спасибо за «Учебник».
Не хватает методичности изложения в силу того, что это отдельные статьи на блоге. При сборке своего первого блочного сайта открыл 5 окон статей «Учебника» и по всем приходится мотаться вверх-вниз в поисках ответов на вопросы. Вам бы это собрать и выпускать редакции (жизнь-то идет, браузеры тоже развиваются), надо ж корректировать для удобства современного чтения.
Далеко не все получилось. Что-то просто отказывается наотрез выполняться.
Первый свой блочно собранный сайт html и css прошел тест w3c на валидность. Еще раз спасибо и за техническое освещение технологии блочной верстки и за передачу общих тенденций в сайтостроении.
Кстати, с IE проблем меньше, чем с Оперой. На сегодняшний день. IE мы знаем, как отХАКать. А с Оперой что делать?

Вам бы это собрать и выпускать редакции (жизнь-то идет, браузеры тоже развиваются)

Я, к сожалению, не Шива :-). Учебник сейчас не основной мой интерес.

Кстати, с IE проблем меньше, чем с Оперой. На сегодняшний день. IE мы знаем, как отХАКать. А с Оперой что делать?

Да ничего с ней не делать. В отличие от IE, Опера сама фиксит свои баги, и пользователи ее очень быстро переходят на новые версии.

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

Ну там идея как раз в том, что это некая особенная картинка. Некая «главная», что ли. Кроме того, задание сложных стилей (тот же float ) очень общим селекторам ( #main img ) потенциально опасно. Например некий гипотетический контент-менеджер разместит на сайте где-нибудь картинку, и если она по воле случая окажется внутри блока main, то ее вдруг ни с того ни с сего отнесет налево и огородит отступами. Поэтому и класс.

Иван! Внимательно изучая и Ваш блог и много еще попутной информации, так или иначе связаной с блочной версткой, прочитал некоторый объем статей о семантической верстке. И обдумывая прочитанное, пришел к выводу, что блочная верстка ДОЛЖНА быть семантической, т.е. логически жестко структурированной. И тогда получается, что внутри отдельных блоков не может быть СЛУЧАЙНОЙ информации. Внутри одного блока — информация «логически параллельная», однотипная. Отсюда — и вывод о возможности задания стиля информации внутри каждого блока.
А исключительные случаи, равно как и ошибки неких контент-менеджеров, бывают всегда. Но не думаю, что для таких случаев надо менять логику построения верстки.

верстка ДОЛЖНА быть семантической, т.е. логически жестко структурированной

Это очень странный признак семантики. Семантика — это, вкратце, использование элементов по смыслу. Она никак не связана со структурностью вообще и с жесткой структурой в частности.

Впочем, я понимаю кажется, что вы имеете в виду. Постараюсь обосновать.

То, что я описал выше, продиктовано как раз семантикой, а не представлением. Запись #main img — означает «любая картинка внутри блока main». Мне же понадобилось семантически выделить одну картинку из вороха остальных, для которых этот блок в том числе предназначен (хотя я явно этого нигде не писал). В HTML нет ничего специального для этого, поэтому я воспользовался универсальным средством создания внутрисайтовой семантики — придумал отдельный класс. Есть тонкий момент: этот класс существует не потому, что CSS’ом надо как-то сослаться на «картинку внутри main», а потому что на сайте существует реальная семантическая разница между типами картинок внутри main.

И тогда получается, что внутри отдельных блоков не может быть СЛУЧАЙНОЙ информации. Внутри одного блока — информация «логически параллельная», однотипная. Отсюда — и вывод о возможности задания стиля информации внутри каждого блока.

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

В Опере 9.62 страничка получилась точь-в-точь как у Вас описано. а вот в IE 6 после изготовления «стакана» из body все смешалось, и дальше он начал творить все что хочет. В конце концов, левая колонка вообще куда-то пропала, а остальные колонки наложились друг на друга. Подскажите, где можно подробно изучить свойства IE, чтобы привести страничку к надлежащему виду?

Разобрался. Оказывается, IE странно отнесся к добавленным мной комментариям %) Стоило убрать их все, оставив только строки кода — и все заработало!!Намотаю на ус. )

Не мотайте! Эти знания нынче устаревают с неимоверной быстротой: все потихоньку или отказываются, или думают отказываться от всех этих специальных телодвижений в адрес IE6.

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

Чего-то у меня ничего не выходит.
Если колонка с новостями короткая, то Опера оставляет пространство белое между блоками «content» и «meta» и полсодержимого блока мета не закрашивается цветом.
А если колонка длинная, то только только полметы не закрашивается.
А если совсем длинная, то полметы вообще исчезает.

А в ИЕ другие проблемы:
Если колонка с новостями короткая, то остается тот же белый пробел между контентом и метой.
Если длинная, то кусок новости не влезает. Хотя я делала все как у вас написано.

Вроде на все нажаловалась.

@Истеричка Курага: по-моему это только у вас. у меня всё красиво. Спасибо, Иван!

Такой большой коментарий написал-отправил а он не отправился..и не сохранился..короче спасибо хотел сказать :)

в блоке #sections фоновый рисунок должен быть градиентным (как заголовок «новости»). Для этого Вы брали большую картинку и делали фоновый рисунок для всего контейнера Body. Может быть лучше было бы сделать фоновый рисунок для меню тот же, который в новостях, и для блока #sections установить правую границу синего цвета и пунктирного типа? и такую же границу, только левую установить для блока #news? (или для #main правую и левую границу). тогда весь фоновый рисунок body можно убрать и оставить фон просто белым. Это должно ускорить отображение страницы и сэкономит трафик посетителей)

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

извините за флуд, но я должен написать ещё одно сообщение) В опере (у меня 9.64) в разделе поиска по сайту кнопка поиск переходит на третью строчку и текстовая форма прилипает к правой границе заголовка. А в IE 6 напротив всё отлично)

Иван Сагалаев человек-легенда. Читаю учебник в режиме «от корки до корки», и вот не могу понять . Товарищи, почему дивы идут именно в таком порядке ?


. и в стилях прописать

И в Опере 10.1 та же проблема)

При масштабировании окна в IE7 появляется несколько очень неприятных проблем:

1) Body не остается посередине окна, а смещается влево.

2) При уменьшении масштаба окна

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

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

Пожалуйста, подскажите, как исправить.
Надеюсь на Вашу помощь.

Кстати, с «резиновым» вариантом те же самые проблемы.

Исправлять двойной отступ в IE можно проще. Добавив в конце display: inline;

Вот так должно быть:

Огромное Вам спасибо Иван! С помощью этого примера разобрал 3-х недельную «кучу» инфы в голове!=) Буду читать дальше ваш «Учебник». Рекомендую новичкам и человекам с «кучами» в голове!=))

как новичок пишу*

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

Спасибо, в первый раз пришел с год назад, ничего не понял. вернулся через полгода — стало понятнее. а теперь вообще ас. почти доделал дизайн, только проблемы с подвалом. в ie нормально отображается, а в опере лезет на раздел новостей((( ну ладно. не разберусь — через полгодика зайду)))

Статья потрясающая! Большое Вам за нее спасибо!

Но у меня вот возникли проблемы:

1)С отображением блока поиска в Оpera 10.61 — поле написания запроса и кнопка поиска выползают за отведенное им поле и никакое уменьшение шрифта или расстояний между буквами не исправляет этот дефект.

2) #meta p — почему-то этот код не срабатывает и не уменьшает расстояния между параграфами подвала. Возможно ли исправить это каким-нибудь другим способом?

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

в

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

Но, к сожалению, у меня данный приём не работает на IPad’е 2’м на Safari. Реальная ширина Safari IPad’а 2’го — 980px, но, если страница не влазит, он должен пропорционально уменьшать её так, что бы она влазила по ширине. Так делает, например, браузер, идущий в комплекте с Android`ом и обрабатывает этот приём корректно.

На других сайтах я замечал, как IPad’овский Safari в принципе тоже умеет пропорционально уменьшать сайты, но — не в случае с данным приёмом.

Не сталкивались ли Вы с такой проблемой и если да — то как её решали?

Я не сталкивался с вёрсткой как раз примерно со времени написания этих статей. Про мобильную вёрстку ничего не знаю.

Спасибо за статьи! Когда-то очень помогли мне и думаю их перечитать. А сейчас куда устремлён Ваш взор? На какие технологии?

Иван Сагалаев Одни кракозябры у вас исправьте пожалуйста все html странички в примере, добавьте в head :

Илья, спасибо, я поправил конфигурацию на сервере, чтобы charset в заголовках присутствовал.

К слову, если пользоваться meta, то достаточно .

Я, вроде бы внимательно читал весь ваш очень полезный учебник, Иван, но не встречал объяснения, почему при трехколоночном дизайне в HTML — файле надо перечислять колонки в одном порядке, а затем при помощи CSS менять их местами?

Спасибо, Gkk за то что спросил об этом! Я весь моск сломал рассуждая над тем же вопросом :) Спасибо, Иван, за то что ответили, и за Вашу работу!

Иван, скажите пожалуйста, насколько актуальны Ваши посты? Эта статья датируется 2006 г., а на дворе уже 2014, за это время ведь многое уже изменилось.

Практические примеры совсем не актуальны, конечно. Насколько я знаю, профессиональные верстальщики всё меньше верстают напрямую CSS’ом отдельные свойства, а вместо этого пользуются более высокоуровневыми инструментами. Но фундаментальные принципы того, как работают float, position и прочие вещи, никак не поменялись.

Читая сейчас эти статьи, 2015 год, март, кстати жаль что даты коментов не отображаются, информация достаточно актуальная. Сам как раз в году 2004-2006 забросил верстку, как раз в тот момент когда все таблицами верстали. Сейчас догоняю упущенное, сложно достаточно (:

Верстка по сетке Bootstrap (часть 1)

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

Сегодня мы сверстаем верхнюю навигационную панель по сетке Bootstrap, но прежде, рекомендую почитать две мои прошлые статьи, где я очень подробно, на картинках, объясняю, что такое вообще сетка Bootstrap и как с ней работать.

Скриншот верхней панели макета.

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

Новичку на заметку

Как не запутаться, где свои классы, а где Bootstrap-а? Бутстраповские классы прописываются только в HTML разметку, они используются так, как есть, а в CSS файле, только созданные вами классы.

HTML разметка

Создаем свой блок-обертку с классом top-menu, чтобы задать отступы и цвет панели. Оборачиваем всю конструкцию в бутстраповский резиновый контейнер container-fluid, внутри которого класс row – ряд (как в таблице).

Навигационная панель визуально делится на две равные части – пространство занимаемое логотипом плюс пустота и меню. В ряду у нас будет две колонки – col-md-6 (В одной колонке col на средних устройствах помещается 6 столбиков сетки). Однако на экранах маленьких устройств, в первой колонке помещается только 4 столбика сетки – col-sm-4, а во второй колонке – 8 столбиков (col-sm-8). Для ширины экранов, меньше 576 пикселей, ничего прописывать не надо, бутстрап уже об этом позаботился, адаптация произойдет автоматически.

  • align-items-center – ставит в центр логотип по вертикали
  • align-items-end – прижимает навигационное меню к нижнему краю
  • justify-content-end – выравнивает меню по центру на горизонтали

Почему мы не указали количество столбиков сетки для больших экранов, col-lg- и col-xl-? Причина простая – там тоже будет по 6 столбиков в колонке. Данный макет очень простой.

col-md-6 + col-md-6

col-sm-4 + col-sm-8

На самых маленьких экранах

CSS код

Можно было бы не заморачиваться и вырезать из макета синий кружок, просто вставив его картинкой в HTML. Но в обучающих целях, мы сделали все в CSS. Обратите внимание, что белые кавычки, вставлены при помощи псевдоэлемента before, в виде юникода.

Демонстрация примера в браузере

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

  • BB-код ссылки для форумов (например, можете поставить её в подписи):
  • Комментарии ( 0 ):

    Для добавления комментариев надо войти в систему.
    Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

    Copyright © 2010-2020 Русаков Михаил Юрьевич. Все права защищены.

    Цукерберг рекомендует:  C++ - помогите переписать с языка python на C++
    Понравилась статья? Поделиться с друзьями:
    Все языки программирования для начинающих