Верстка css: табличная, кроссбраузерная, адаптивная. Основные принципы

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

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

Верстка с помощью css – что это и зачем оно нужно?

Ну сначала все же немного разъяснений для новичков. Css – это замечательный язык, который полностью состоит из свойств и их значений. Эти самые свойства позволяют определенным образом влиять на внешний вид элементов. Например, свойство color определяет цвет текста, background – фон элемента, font – его шрифт и т.д и т.п.

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

Так вот, css придуман для того, чтобы создавать внешний вид. И со своей задачей он справляется замечательно. HTML позволяет создавать элементы, формировать разметка, а css – оформлять все это дело. Эти два языка связаны неразлучно, так что если отнять один – другой просто станет неполноценным.

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Основные вещи, которые можно сделать в css

Табличная верстка с помощью css. На самом деле от таблиц как от способа верстать во многом отказались из-за громоздкого html-кода, но не так давно в css появились возможности, которые позволили любые элементы превратить в табличные. Вот они: Display: table, display: table-row, display: table-cell.

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

Кроссбраузерная верстка. Как css может в этом помочь

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

В сети есть много различных вариантов css reset, так как каждый веб-разработчик любит делать по-своему. В самом примитивном варианте сброс стилей можно сделать так:

*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}

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

Рис.1. Каждому из этих товарищей нужно угодить, иначе можно потерять потенциальных посетителей сайта.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Адаптивная верстка в css

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

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

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

@media and only screen (max-width: 600px){
img{
float: none;
}
}

Что происходит? Этим запросом мы указали браузеру, что если ширина экрана будет меньше 600 пикселей, то нужно отменить обтекание текста изображениями. Зачем? Ну хотя бы потому, что изображение и текст в одной строке, шириной всего 600 пикселей, будут смотреться очень плохо.

Основа адаптивности закладывается с помощью свойства max-width. Например, max-width: 1320px означает, что максимум блок будет тянуться на 1320 пикселей, но если размер окна будет меньше, то он тоже будет уменьшаться. Никакого горизонтального скролла!

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

Какой редактор использовать для работы с css?

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

Скриншот с кодом, который вы только что могли наблюдать, сделан из программы Notepad++, где и был открыт css-файл. Мне кажется, этот редактор просто отлично подходит для работы с этим языком – очень хорошо подсвечиваются различные составные части кода, а если разработчик еще и придерживается определенных правил оформления, то код читается просто замечательно.

Узнайте css лучше

Кроссбраузерность, адаптивность, работа с таблицами и многое другое – все это можно очень долго рассматривать отдельно, потому что css предоставляет нам все необходимое для реализации отличного внешнего вида у сайта.

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

HTML что такое, CSS что такое, верстка определение. Уроки верстки с нуля.

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

Настоящий профессионал всегда идет ОТ ПРОСТОГО К СЛОЖНОМУ. Не существует единого правильного стандарта, и каждый человек выбирает и адаптирует свой собственный подход в обучении программированию.

Однако есть набор практик-шагов, помогающих создать ПРОЧНЫЙ БАЗОВЫЙ ФУНДАМЕНТ, и помогает в подавляющем большинстве случаев.

Узнайте подробнее о серии курсов “6 шагов к профессии веб-программист”

1. HTML/CSS верстка

Основные HTML-теги, CSS-стили. Работа в редакторе кода SublimeText. Адаптивная верстка сайтов под мобильные устройства. Создание верстки сайта и правильной HTML-разметки для SEO.

2. Верстка на HTML/CSS-фреймворке Bootstrap

Фреймворк — это по сути конструктор, с помощью которого, вы сможете создавать верстку любого веб-сайта в разы быстрее, чем в с помощью классического HTML/CSS. Навыки работы с Bootstrap — частое требование работодателей. Подробнее

3. Язык программирования PHP и база данных MySQL

Базовый фундамент для профессионального программиста. Понимание Объектно-Ориентированного Программирования. Построение архитектуры базы данных. Безопасность сайта. Подробнее

4. Терминал Linux /контроль версий кода GIT

Работа с терминалом Linux для настройки серверов ваших сайтов. Система контроля версий кода GIT для командной работы над проектами. Синхронизация кода вашего сайта с GIT-репозиторием.

5. Создание сайта на PHP-фреймворке CodeIgniter

Аккумулируете все полученные знания и сделаете код веб-сайта масштабируемым и понятным, используя архитектуру MVC (model — view — controller). MVC даёт дополнительную гибкость в терминах повторного использования кода и разделения дизайна и реализации.

6. Язык программирования Javascript и библиотека jQuery

Как сделать сайт более оживленным и быстрым. Интеграция кода JS для живости сайта. Работа с плагинами jQuery.

Ждать не нужно когда наберется группа или наступит дата начала курса — на beONmax.com вы приступаете к обучению сразу!

Научитесь верстать 

Азы веб-разработчика начинаются с верстки, чтобы научиться верстать вам необходимо освоить HTML и CSS.

Что такое HTML

HTML — это стандартизированный язык разметки (от англ. HyperText Markup Language), применяется для создания веб-страниц. Он обрабатывается браузером и отображается в виде документа в привычной для человека форме на экране монитора. Большинство веб-страниц содержит описание разметки на языке HTML.

Другими словами в начале работы, используя язык HTML вы РАЗМЕЧАЕТЕ, ГДЕ  будут размещены элементы: заголовок, картинки, меню, текст и т.д. Эту работу можно сравнить с созданием макета-чертежа, который понятен вашему компьютеру.

Проведем аналогию.

Если вам нужно создать плакат-визитку о себе НА ЛИСТЕ БУМАГИ, то сначала, вы представите — КАК это будет выглядеть в виде составляющих элементов:

• будет ли это только текст с заголовком
• или вы еще разместите свою фотографию
• или это будет только набор ваших фотографий
• или фотографий с надписями
• ваше фото будет в центре или в правом верхнем углу
• будет ли текст написан в 1, 2 или 3 колонки и т. д.

Для разметки бумаги вы используете — ручку, карандаш, для веб-версии вы используете язык разметки HTML.

Что такое CSS

CSS — каскадные таблицы стилей (от англ Cascading Style Sheets). Это язык описания внешнего вида документа, написанного с помощью HTML. CSS используется для задания шрифтов, цветов, отдельных блоков и т.д.

Когда вы разметили страницу — вам хочется УВИДЕТЬ в красках свой макет на экране монитора, именно здесь используется CSS. В ней уже собраны шрифты, цвета, отдельные блоки, которыми вы наполняете свою размеченную страницу. Внося изменения в код, вы подбираете подходящие цвета, шрифты, оформление блоков.

Продолжим наш пример-аналогию с плакатом-визиткой о себе.
Наметив расположение элементов, вы переходите к  ДЕТАЛЯМ: оформлением цветом, подбор шрифтов, рамочек, выбор фона и т.д.

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

Что же такое верстка?

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

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

Подведем итоги

Обладая знаниями по вёрстке и обязательно потренировавшись, создав несколько шаблонов сайтов на разные тематики, применив разные стили, цвета, размещение элементов, можно начать работать верстальщиком или создавать шаблоны сайтов на заказ (фриланс). 

Для тех, кто уже сегодня задумывается о подработке или работе на себя — узнайте об особенности этого вида заработка: 

Фрилансер — кто это и как им стать? Фриланс для программиста

Умный старт в удаленной работе. Обзор бирж фриланса

Пройти полный курс HTML/CSS и освоить базовый фундамент по верстке вы можете на нашем сайте он-лайн в удобном для себя графике.

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

Мир открывает двери перед тем, кто знает, куда идет. 

Ральф Эмерсон

Включайтесь и открывайте свои возможности!

С верой в ваш потенциал, команда beONmax

Верстка сайта с нуля. Меню навигации. Часть 1.

Вы здесь:
Главная — HTML — HTML 5 — Верстка сайта с нуля. Меню навигации. Часть 1.

Начиная с этого урока, мы будем учиться верстке сайта с нуля в популярном flat стиле. Эта тема очень объемная и мы посвятим ей не один урок. Что означает это на практике?

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

Будем исходить из того, что заказчик оказался добрым человеком и предоставил нам вместе с макетом и заранее порезанные картинки. Для создания HTML страницы, нам потребуется: .psd макет, папка с картинками, Photoshop, Notepad++ и браузер.

Мы говорим с вами про макет, но пока это только картинка, из которой нам предстоит сделать полноценную HTML страницу.

Обратите внимание, что наш макет представляет из себя классический пример flat дизайна. Flat дизайн – это значит «плоский», здесь вы не увидите объемных теней, градиентов и других «наворотов».

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

Верстка шапки сайта

Создаем HTML страницу и делаем разметку нашей шапки. Содержимое шапки пишем внутри парного тега header.


<header>

<div>

 <div>

 <div>

   <a href="#"><img src="logo.png" alt=""/></a>

 </div>

 <div>

  <ul>

   <li><a href="#">Главная</a></li>

   <li><a href="#">Портфолио</a></li>

   <li><a href="#">Обо мне</a></li>

   <li><a href="#">Контакт</a></li>

  </ul>

 </div>

 </div>

 </div>

</header>


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

Разберем основные моменты. Логотип и меню навигации должны быть в одной строке. Поэтому в блоке div с логотипом задаем обтекание — float: left; Навигационное меню встанет справа от логотипа. Пункты меню должны быть в одной строке — display:inline-block; Отменить обтекание можно вставкой в код пустого дива — <div></div>, в стилях соответственно записываем так — .clear{clear:both;}

Код шапки сайта в файле style.css:


body {

  font-family: 'Lato', Verdana;

  font-size: 100%;

  background: #fff;

}

.wrap

{

  margin: 0 auto;

  width: 70%; /* отступы относительно окна браузера */

}

.header{

  padding: 1.3em 0em; /* поля вокруг текста */

}

. logo{

  float: left; /* обтекание логотипа */

}

.logo a {

  display: block; /* переопределение в блочный */

}

.nav {

  float: right; /* обтекание логотипа */

  margin-top: 0.82em;

}

.nav > ul > li {

  display:inline-block; /* переопределение в строчно-блочный */

}

.nav > ul > li.active a{

  background: #d0a5a5;

  color: #ffffff;


}

.nav > ul > li > a {

  display: block;

  font-family: 'Lato', sans-serif;

  font-size: 1.1em;

  text-transform: uppercase;

  padding: 0.5em 1em;

  color: #444;

  -webkit-transition: 0.9s; /* плавный переход */

  -moz-transition: 0.9s;

  -o-transition: 0.9s;

  transition: 0.9s;

}

.nav > ul > li > a:hover {

  color: #fff;

  background: #d0a5a5;

}


Код HTML разметки шапки сайта:


<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<link href='http://fonts. googleapis.com/css?family=Lato:100,300,400,700,900'
rel='stylesheet' type='text/css'>

<link href="style.css" rel="stylesheet" type="text/css" media="all" />

<title>Портфолио мопса "Валли"</title>

</head>

<body>

<header>

  <div>

 <div>

 <div>

  <a href=""><img src="logo.png" alt=""/></a>

 </div>

 <div>

  <ul>

   <li><a href="#">Главная</a></li>

   <li><a href="#">Портфолио</a></li>

   <li><a href="#">Обо мне</a></li>

   <li><a href="#">Контакт</a></li>

  </ul>

 </div>

 <div></div> /* отмена обтекания */

 </div>

 </div>

</header>

</body>

</html>


В процессе верстки сайта с нуля мы получаем готовую шапку сайта.

Результат работы можно посмотреть на
jsfiddle

Продолжение следует..

• 
  Создано 12.10.2017 12:50:40

• 
  
  Михаил Русаков

Предыдущая статья Следующая статья

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

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

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

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

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

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

1. 
   Кнопка:
   
   <a href=»https://myrusakov. ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>

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

2. 
   Текстовая ссылка:
   <a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>

   Она выглядит вот так: Как создать свой сайт

3. BB-код ссылки для форумов (например, можете поставить её в подписи):
   
   [URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]

Учебник CSS 3. Статья «Адаптивная верстка. Часть 1.»

basicweb.ru

• HTML
  • Учебник HTML
  • Справочник тегов
  • Атрибуты событий
  • Глобальные атрибуты
  • Коды языков
  • Мнемоники
  • Цвета
  • Тесты знаний
• CSS
  • Учебник CSS
  • Справочник свойств
  • Селекторы
  • Функции
  • Правила
  • Flexbox генератор
  • Grid генератор
  • Учебник LESS
• JavaScript
  • Интерфейсы веб API
  • Объект Array
  • Объект Date
  • Объект Function
  • Объект Global
  • Объект JSON
  • Объект Math
  • Объект Number
  • Объект Object
  • Объект RegExp
  • Объект Promise
  • Объект String
• jQuery
  • Селекторы
  • События
  • Методы DOM
  • Перемещения
  • Утилиты
  • Эффекты
  • AJAX
  • Объект Callbacks
  • Объект Deferred

CSS учебник

• Приступая к изучению
• Введение в CSS
• Создание первой таблицы стилей
• Селекторы. Часть 1
• Селекторы. Часть 2
• Псевдоклассы и псевдоэлементы
• Селекторы. Часть 3
• Селекторы. Част

Правила верстки: адаптивная, блочная, css верстка

Соблюдение правил качественной верстки – это визитная карточка нашей веб студии. Если вам нужна разработка сайта, вы можете заказать сайт компании в веб студии АВАНЗЕТ. Мы выполним все работы под ключ с продвижением и гарантией результата.

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

Для адаптивной вёрстки, важно задавать в параметрах все описанные в требованиях ТЗ размеры экранов. С отдельным вниманием необходимо подготовить для веба cкрипты, стили и изображения. Вёрстка обязательно должна пройти тест на насыщение большим количеством контента, и не ломаться при добавлении большего количества текста.

Верстка сайта стандартными методами имеет преимущества и недостатки

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

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

Дизайн и верстка — дополнительные критерии:

1. В названиях классов и атрибутах нельзя использовать транслит
2. Для стилизации – не разрешается использовать #id
3. Вложенность селекторов не должна быть больше двух
4. Для всех элементов со значением display: inline-block — необходимо явно указывать подходящее CSS-свойство vertical-align
5. В конце перечисления важно указать альтернативные варианты шрифтов и тип семейства
6. CSS-префиксы необходимо располагать в правильном порядке
7. Нужно явно прописать цвет фона для блоков у которых есть фоновые изображения. Цвет фона должен соответствовать основному цвету фонового. Если не прописать цвет фона, то часть текста без картинок может оказаться невидимой.
8. Необходимо, чтобы при наведении или нажатии на элемент, окружающие его блоки не изменяли положения. Ничто не должно «двигаться» просто так
9. Для легкости и быстроты загрузки необходимо минимизировать CSS-код и JavaScript-код.
10. У всех изображений необходимо в тегах <img> прописывать размер
11. Важно все скрипты подключить непосредственно перед тегом </body>
12. Желательно использовать минимум из возможных элементов HTML
13. Отказоустойчивость: необходимо применять подход Progressive Enhancement для возможности работы сайта при отключенном JavaScript.

Заказать разработку сайта

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

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

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

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

Чип тюнинг может быть выполнен несколькими способами:

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

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

Основные преимущества

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

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

04.01.2018

← Поделиться с друзьями !

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

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

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

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

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

Содержимое

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

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<title>...</title>
<link rel="stylesheet" href="style.css">

<div><h2>...</h2></div>

<div>

  <div>...</div>

  <div>
    <h3>...</h3>
    <ul>
      ...
    </ul>

    <form>
      ...
    </form>
  </div>

  <div>...</div>

</div>

<div>...</div>

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

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

Валидация

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

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

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

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

Верстка

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

Организация

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

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

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

• цвета
• шрифты
• раскладка
• остальное

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

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

/* Layout ******************/
/* Fonts *******************/
/* Colors ******************/
/* Misc ********************/

Раскладка

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

body {
  padding:0; margin:0 auto;
  width:700px;
}

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

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

Еще одна вещь. Очень, очень часто верстальщики игнорируют элемент <html> напрочь, и вместо этого <body> работает как фоновый элемент, а внутрь него вставляется лишний <div>, который держит содержимое. Не нужно так делать, кроме ухудшения читаемости это не дает ничего.

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

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

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

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

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

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

#main {
  float:left; width:55%;
}

#sections {
  float:left; width:20%;
}

#news {
  float:right; width:25%;
}

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

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

#main {
  float:left; width:55%;
  margin-left:20%;
}

#sections {
  float:left; width:20%; margin-left:-75%;
}

#news {
  float:right; width:25%;
}

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

* html #main {
  margin-left:10%;
}

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

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

#content {
  overflow:hidden; width:100%;
}

Настало время посмотреть на то, что получилось к этому моменту.

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

#search {
  position:absolute;
  top:0; right:0;
  margin:20px;
}

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

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

body {
  /* ... */
  position:relative;
}

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

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

#title {
  background:#FEE;
}

#content {
  background:#EFE;
}

#meta {
  background:#EEF;
}

#search {
  background:#FFE;
}

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

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

h2 {
  margin:0; padding:20px;
}

#meta {
  padding:1px 0;
}

Одна маленькая деталь. В первом случае я просто обнулил margin у <h2>, чтобы нечему было вываливаться, а padding нужен просто для красоты, чтобы пространство вокруг текста было. Во втором случае я добавил маленькие незаметные padding’и контейнеру, чтобы отменить вываливание margin’ов <p>. Почему именно так — расскажу дальше.

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

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

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

body {
  /* ... */
  min-height:100%;
}

#meta {
  position:absolute; bottom:0;
  width:100%;
}

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

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

html {
  height:100%;
}

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

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

* html body {
  height:100%;
}

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

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

#meta {
  position:absolute; bottom:0;
  height:40px; width:100%;
  padding:1px 0;
}

#content {
  padding-bottom:42px;
}

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

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

Шрифты

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

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

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

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

body {
  font:10pt Tahoma, Sans-Serif;
}

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

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

font: <курсивность> <жирность> <размер> <список гарнитур>;

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

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

h2 {
  font-size:180%;
  letter-spacing:1px;
}

#main h3 {
  font-size:130%;
}

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

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

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

#sections,
#news {
  font-size:80%;
}

#sections h3,
#news h3 {
  font-size:125%; font-weight:bold;
  text-transform:uppercase;
}

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

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

#news h4 {
  font-size:100%; font-weight:bold;
}

#meta {
  font-size:70%;
}

#search input,
#search button {
  font-size:90%;
}

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

Итак, со шрифтами закончили.

Цвета и декор

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

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

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

#title {
  background:url(title-bg.png) #45F left top repeat-x;
  color:white;
}

#meta,
#meta a {
  background:#45F;
  color:white;
}

#search {
  color:white;
}

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

background:<картинка> <цвет> <расположение> <повтор>;

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

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

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

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

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

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

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

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

Код:

h2 {
  background:url(logo.png) left top no-repeat;
  padding-left:60px;
}

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

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

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

#search p {
  margin:0;
}

#search input {
  width:10em;
}

Все просто. Посмотрим, что получилось.

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

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

* html h2 {
  height:1%;
}

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

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

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

* html #search p {
  white-space:nowrap;
}

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

* html #search button {
  margin-left:4px;
}

В Опере проблема другого плана. Элемент <button> здесь разрывает абзац, в котором лежит вместе с текстовым полем, и, соответственно, переносится ниже. В общем-то, починить это можно довольно просто: поменять <p> на <div>. Но я этот баг обнаружил слишком поздно, он был уже в нескольких пошаговых файлах, поэтому правку этого я оставляю в качестве самостоятельного упражнения читателям :-). Кроме того, у меня есть подозрение, что в новой Опере 9 это могли уж и исправить сами разработчики.

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

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

#meta p {
  margin:5px;
}

Колонки

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

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

body {
  background:url(content-bg.png) white left top repeat-y;
  color:black;
}

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

Посмотрим на колонки.

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

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

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

html {
  background:url(window-bg.png) #EEE;
}

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

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

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

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

#sections h3 {
  display:none;
}

Следующий объект стилизации — меню. Оно задано списком <ul> и оттого сдвинуто вправо и имеет буллиты у каждого пункта. Нам всего этого не надо:

#sections ul {
  list-style:none;
  margin:50px 0; padding:0;
}

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

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

/* Colors ******************/

#sections li a {
  background:#293499;
  color:white;
  border-color:white;
}

#sections li a:hover {
  background:#D00;
}

/* Misc ********************/

#sections li a {
  display:block;
  margin:5px 0; padding:2px 5px;
  border-style:solid; border-width:1px 0;
  text-decoration:none;
}

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

• Не только цвета фона и текста, но и рамок вынесены в раздел цветов, а вот толщина и стиль рамки задается в декоре.
• Цвета текста задаются элементу <a> внутри <li>. Это из-за того, что браузер по умолчанию красит ссылки в синиц цвет, а не в цвет окружающего текста. Если белый цвет назначить на <li>, то <a> все равно останется синим.
• Конструкция a:hover работает, когда над <a> находится мышка. В этом случае мы подкрашиваем ссылку красным фоном.
• display:block для ссылки нужен для того, чтобы она, как положено блочному элементу, заняла всю ширину <li>, и площадь ссылки была не только над буквами, но занимала весь элемент списка.

Левая колонка готова.

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

* html #sections li a {
  height:1%;
}

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

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

/* Colors ******************/

#news h3 {
  background:url(news-head-bg.png) #DDE6FF left top repeat-x;
}

/* Misc ********************/

#news h3 {
  margin:0;
  padding:10px;
}

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

#news h4 {
  float:left; 
  margin:0 5px;
}

#news p {
  margin:20px 5px;
}

Тут может возникнуть вопрос, почему отступ по краям внутри колонки задается ее внутренним элементам, а не самой колонке? Во-первых, потому что одному из элементов — главному заголовку новостей (<h3>) — этот отступ не нужен. А во-вторых, если колонке, которой задана ширина, проставить отступы, то они ее расширят, она перестанет умещаться в оставленные ей в раскладке 25%, и раскладка сломается.

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

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

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

* html #news h4 {
  margin-left:2.5px;
}

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

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

#news h3 {
  margin:0 0 20px 0;
  padding:10px;
}

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

/* Colors ******************/

#news a {
  color:#D00;
}

/* Misc ********************/

#news a {
  background:url(red-arrow.png) right center no-repeat;
  padding-right:13px;
}

* html #news a {
  padding-left:1px;
}

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

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

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

/* Colors ******************/

#main h3 {
  color:#293499;
}

/* Misc ********************/

#main h3,
#main p {
  margin-left:15px;
  margin-right:15px;
}

#main h3 {
  margin-top:20px; margin-bottom:10px;
}

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

/* Colors ******************/

#main .picture {
  border-color:#45F;
}

/* Misc ********************/

#main .picture {
  float:left; 
  padding:5px; 
  border-style:solid; border-width:1px;
  margin:0 15px 15px 0;
}

Все

Ну вот, кажется, готово :-).

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

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

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

CSS layout — Web-разработка အကြောင်း လေ့လာခြင်း

Этот перевод является неполным. Помогите пожалуйста перевести эту статью с английского

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

Хотите стать фронтенд-разработчиком?

Мы составили курс, который включает всю важную информацию, необходимую для достижения вашей цели.

Начать

Предварительные требования

Перед запуском этого модуля у вас уже должно быть:

1. Базовые знания HTML, как описано в разделе «Введение в HTML».
2. Ознакомьтесь с основами CSS, как описано во введении в CSS.
3. Научитесь стилизовать коробки.

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

Направляющие

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

Введение в макет CSS

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

Нормальный расход

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

Flexbox

Flexbox — это метод одномерного макета для размещения элементов в строках или столбцах. Элементы изгибаются, чтобы заполнить дополнительное пространство, и сжимаются, чтобы поместиться в меньшее пространство. Эта статья объясняет все основы. Изучив это руководство, вы можете проверить свои навыки работы с flexbox, чтобы проверить свое понимание, прежде чем двигаться дальше.

Сетки

CSS Grid Layout — это система двухмерного макета для Интернета. Он позволяет размещать контент в строках и столбцах и имеет множество функций, упрощающих создание сложных макетов.Эта статья даст вам все, что вам нужно знать, чтобы начать работу с макетом страницы, а затем проверить свои навыки работы с сеткой, прежде чем двигаться дальше.

Поплавки

Первоначально для плавающих изображений внутри блоков текста свойство float стало одним из наиболее часто используемых инструментов для создания макетов с несколькими столбцами на веб-страницах. С появлением Flexbox и Grid он вернулся к своему первоначальному назначению, как объясняется в этой статье.

Выбор позиции

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

Многоколонная компоновка

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

Адаптивный дизайн

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

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

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

Устаревшие методы компоновки

Системы сетки

— очень распространенная функция, используемая в макетах CSS, и до макета сетки CSS они, как правило, были реализованы с использованием плавающих элементов или других функций макета. Вы представляете свой макет как заданное количество столбцов (например, 4, 6 или 12), а затем помещаете столбцы содержимого в эти воображаемые столбцы.В этой статье мы рассмотрим, как работают эти старые методы, чтобы вы поняли, как они использовались, если вы работаете над более старым проектом.

Поддержка старых браузеров

В этом модуле мы рекомендуем использовать Flexbox и Grid в качестве основных методов компоновки для ваших проектов. Однако на вашем сайте будут посетители, которые используют старые браузеры или браузеры, не поддерживающие используемые вами методы. Так будет всегда в Интернете — по мере разработки новых функций разные браузеры будут отдавать приоритет разным вещам.В этой статье объясняется, как использовать современные веб-технологии, не блокируя пользователей старых технологий.

Оценка: Основное понимание макета

Экзамен для проверки ваших знаний о различных методах верстки путем компоновки веб-страницы.

См. Также

Практические примеры размещения

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

Учебное пособие: как закодировать ваш PSD в макет HTML-CSS

Джереми Х.

Сегодня я покажу вам шаг за шагом, как преобразовать PSD в HTML на простом примере дизайна Web 2.0. Пять лет назад вам пришлось бы использовать множество дополнительных графических элементов для закругленных границ и теней, и вам пришлось бы обрезать закругленные изображения или создавать прозрачную маску .png для новостного блока. В те дни вы использовали бы CSS 2.1 и XHTML с длинным Doctype. Сегодня я не собираюсь использовать эти устаревшие методы кодирования веб-сайтов.Я буду применять современные решения, используя CSS3 и HTML5. Я не буду использовать какие-либо фреймворки, такие как Bootstrap или Zurb Foundation. Я покажу вам, как просто преобразовать ваш PSD в HTML5 и разметку CSS.

Для начала загрузите файлы дизайна.

В этом руководстве вам понадобится текстовый редактор с подсветкой кода (я предпочитаю Sublime) и Adobe Photoshop, в котором вы будете выполнять большую часть работы.

Во-первых, откройте дизайн в Photoshop.

Создайте новый каталог с именем проекта.Здесь создайте еще два каталога: css (для ваших файлов CSS) и изображений (для ваших изображений).

Затем откройте редактор кода и создайте два файла. Первый — index.html . Это главный файл вашей страницы, оставьте его в корне каталога. Создайте файл style.css в каталоге css . Это файл стилей, необходимых для макета страницы. Вы напишете свой HTML-код в index.html и CSS-код в стиле .css .

Теперь давайте напишем простой код в index.html, который подходит для большинства проектов нарезки HTML.

  


  
  
  
    




    Образец текста   

Здесь я добавил , который уведомит браузер о том, что это HTML5.Я указал название сайта Insight в теге и подключил файл со стилями style.css , который находится в каталоге css . Теперь у меня есть следующая запись: .

Вот что вы увидите в коде:

Это необходимо для того, чтобы теги HTML5 работали в устаревших браузерах, таких как Internet Explorer 8 и старше. Если вам не нужна поддержка браузера, пропустите ее.

Следующий HTML-код будет записан между тегами и .

Давайте откроем в браузере index.html (я предпочитаю Google Chrome) и посмотрим, что у вас есть. Вы увидите следующий текст « Образец текста ».

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

Вверху вы увидите черную полосу с логотипом и меню навигации.Вы можете называть его . Заголовок .

Далее идет блок с большим изображением и рекламным текстом. Назовем его .hero .

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

Последний блок — . Нижний колонтитул .

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

  


  
  
  
    



    <заголовок>
        

            заголовок здесь
        
    

    

        

            контент героя здесь
        
    

    <основной>
        

            средний контент здесь