—»     —»   Уроки вёрстки: Разрабатываем каркасы (прототипы) с помощью HTML и CSS
  Раздел: Образование и Изучение, Руководства   Комментариев: 3  

Уроки вёрстки: Разрабатываем каркасы (прототипы) с помощью HTML и CSS

Инструменты по разработке каркасов все больше и больше становятся неотъемлемой частью разработки дизайна, так как дизайнерам важно понимать, каким образом следует разрабатывать тот или иной концепт. Ввиду этого Лэйза Ришельт (Leisa Reichelt) даже организовала мастерскую, в которой обучают разработке прототипов на HTML и CSS. В нашей сегодняшней статье Анна Дебенхам (Anna Debenham) представит вам то, о чем было сказано на семинаре «Code Fitness».

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

Зачем нужен каркас кода?

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

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

Уроки вёрстки: Разрабатываем каркасы (прототипы) с помощью HTML и CSS

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

Что насчет платформ?

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

Предположения

Есть несколько предположений и «напутствий» относительно ваших каркасов:

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

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

Приступаем

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

* Нарисуйте блоки элементов шаблона. Сколько должно быть колонок? Учитывайте это также.
* Какой должна быть ширина блоков и колонок?
* Учитывайте основные текстовые элементы типа заголовков, абзацев, списков, изображений и ссылок.
* Какими должны быть основные стили? Какими должны быть стандартные стили текста, цвета ссылок и размеры заголовков?

Уроки вёрстки: Разрабатываем каркасы (прототипы) с помощью HTML и CSS

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

Теперь мы готовы к тому, чтобы начать разработку. Если у вас есть редактор кода, создайте файл под названием index.html и вставьте туда следующий код. Если у вас нет редактора, вы можете воспользоваться им прямо в браузере, открыв jsbin.com (проект Рэми Шарпа, который не требует регистрации и установки).

Структура

Представляем страницу на самом простом уровне:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Page name</title>
</head>
<body>
<p>Page content</p>
</body>
</html>

Всё находящееся внутри тега head – информация для браузера; она не отображается на странице. То, что находится в теге title – название страницы, которое отображается в качества заголовка вкладки браузера. Весь контент страницы содержится в тэге body.

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

Для этого мне надо добавить основные разделы страницы с помощью тэгов «div». Эти тэги используются для группировки контента. Я также добавила текст внутри тэга «p» (параграф).

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Page name</title>
</head>
<body>
<div class="header">
<p>Header</p>
</div>
<div class="content">
<p>Content</p>
</div>
<div class="ads">
<p>Ads</p>
</div>
<div class="footer">
<p>Footer</p>
</div>
</body>
</html>

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

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

Оформление

Теперь мы приступаем к оформлению контента посредством CSS (Каскадные таблицы стилей, кто еще не в курсе). HTML отвечает за само содержимое, а CSS за то, как это содержимое выглядит. Я люблю начать с оформления фоновых цветов; это помогает мне наглядно ориентироваться – что где находится на странице.

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

Для этого создайте новый файл в той же директории, где у вас помещен index.html и назовите его style.css. Далее откройте index.html и в код страницы перед закрытием тега head внесите следующий код:

<link href="styles.css" rel="stylesheet" type="text/css" />

Вся ваша стилизация будет размещена здесь.

Если вы используете jsbin, откройте тег «style» перед закрытием тега «head», вставьте туда следующий код и закройте тег «/style».

div {
background-color: hotpink;
height: 100px;
}

p {
background-color: orange;
}

Теперь весь контент, облаченный в тег «div», будет подкреплён светло-розовым фоном. Я также добавила параметр высоты, так что вы более наглядно сможете увидеть, что происходит. Но позже мы исключим этот параметр, так как внутри тэга будет реальное наполнение.

Уроки вёрстки: Разрабатываем каркасы (прототипы) с помощью HTML и CSS

Вот так сейчас выглядит наша страница – всё в цвете.

Но что если нам захочется оформить каждый блок на странице раздельно? После добавленного кода стилизации (но до закрывающего тега «style») нужно добавить следующий код:

.header {
background-color: green;
}

.content {
background-color: red;
}

.ads {
background-color: blue;
}

.footer {
background-color: yellow;
}

Учитывайте, что указание цвета производится в Американском грамматическом строе.

Вы помните, что в наш код HTML мы добавили class=""? Эти имена классов мы будем использовать как крючки для стилей. Точка (.) перед словами «header», «content» и «footer» отображает нам то, что это имя класса, а не имя элемента (перед div’ом и p мы не ставим точку, так как они являются истинными HTML-элементами, в отличие от имён классов).

Выбираем имена классов

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

* Быть доступным для быстрого редактирования. Следовательно, лучше использовать описательные имена классов (чтобы они описывали элемент, к которому их применяют). Если мы создадим элемент и зададим ему класс «left-hand-col» или «red», а затем по мере развития событий перенесем его вправо или изменим его цвет, то это будет несколько запутанно.

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

* Быть простым к пониманию (особенно, если вы разрабатываете код в компании или с кем-то на пару). Будет неплохо пользоваться комментариями в коде HTML и CSS, в которых вы бы описывали значение и предназначение элементов. (Вы можете добавлять комментарии следующим образом:
<!-- вот так -->
в HTML и
/* вот так */
в CSS).

Верстка

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

Уроки вёрстки: Разрабатываем каркасы (прототипы) с помощью HTML и CSS

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

Общая ширина нашего дизайна – 960 пикселей. У нас есть две колонки: одна шириной в 720 пикселей, а вторая – 220. Это приводит к тому, что между колонками у нас пространство в 20 пикселей ширины. Основная колонка, которой мы задали класс «content», расположена в левой части, та, которая поменьше и с классом «ads» – в правой части. Шапка и подвал шириной в 960 пикселей.

1. 960 пикселей – это 100% ширины всего контента. Итак, чтобы найти значение 1 пикселя в процентном соотношении, нам надо разделить 100 на 960.
2. Это дает нам результат 0.104166667, что означает примерно 0.104%.
3. Итого: 720x0.104 = 74.88% и 220x0.104 = 22.88%.

Мы можем располагать блоки содержимого посредством CSS, задавая им параметр float. Когда мы вносим какому-либо элементу параметр «float: left», мы заставляем его держаться верхнего левого угла элемента, в котором он содержится, и прекращаться, если на его пути появился другой элемент. Параметр «float: right» заставляет элемент придерживаться верхнего правого угла. Здесь есть некое сходство с text-align left и right, но предназначено для выравнивания блоков содержимого. Нам также нужно задать блокам ширину или они по умолчанию будут растягиваться на полную ширину содержащего их элемента и не дадут возможности разместить последующий элемент после них. Далее, в самый низ кода, добавьте следующий отрывок:

.content {
width: 74.88%; /* 720px */
float: left;
}

.ads {
width: 22.88%; /* 220px */
float: right;
}

.footer {
clear:both;
}

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

Я также задала подвалу параметр «clear:left», что должно выровнять его по одной линии. Когда мы добавили правила float, элементы заполонили пространство в левой части и появились перед блоком с рекламой, а нам это не нужно.

Уроки вёрстки: Разрабатываем каркасы (прототипы) с помощью HTML и CSS

Вы вероятно заметили, что наш текст сидит вплотную к краям блока. Нам нужно «впустить немного воздуха», поэтому нужно добавить параметр отступов контенту. Это сдвинет текст от краев внутри контейнера. В моём дизайне я указала отступ в 20 пикселей, что равно 2.08%. Я также добавила поле к нижнему краю, чтобы блоки были немного отодвинуты друг от друга и не прикасались. Эти параметры можно оставить в пиксельном обозначении, так как только параметры ширины должны быть «резиновыми».

.content {
width: 74.88%; /* 720px */
float: left;
padding: 2.08%;
}

.header,
.content,
.ads {
margin-bottom: 20px;
}

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

Уроки вёрстки: Разрабатываем каркасы (прототипы) с помощью HTML и CSS

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

.content {
width: 70.72%; /* 680px */
float: left;
padding: 2.08%;
}

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

Уроки вёрстки: Разрабатываем каркасы (прототипы) с помощью HTML и CSS

Изображения

Дабы сохранить немного времени, давайте воспользуемся сервисом под названием placehold.it для того, чтобы добавить изображения, которые бы заняли нужные позиции на странице. Данный сервис генерирует изображения любых размеров, которые мы укажем. Давайте добавим первое изображение в код HTML в тег
<div class="ad"></div>

<img src="http://placehold.it/220x400" />

220х400 – это обозначения ширины и высоты. Данный код автоматически подгружает изображение, которое бы заняло нужное место в нашей колонке для рекламы. Но так как изображение больше нашей колонки, оно выезжает за границу. Это очень просто исправить посредством CSS.

img {
max-width: 100%;
}

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

Миниатюры

Далее нам надо добавить несколько миниатюр в основную колонку контента, в теги
<div class="content"></div>
, а затем выровнять их по одной линии. Вот HTML-код для миниатюры (скопируйте его и вставьте столько раз, сколько вам будет нужно миниатюр).

<a class="thumbnail" href="#">
<img src="http://placehold.it/213x160" />
<p>Strawberry Cheesecake</p>
</a>

Ссылка указана как для изображения, так и для тега paragraph, поэтому вся эта область на странице будет кликабельна (я просто добавила # в параметр href=, так как на данный момент ссылка никуда не ведет, но вы укажите нужную вам ссылку).

Теперь нам нужно выровнять их по одной линии (3 в линию), с небольшим пространством с правой стороны. Вот код CSS:

.thumbnail {
float: left;
width: 31%; /* That's 31% of the containing element */
margin-right: 3.5%;
margin-bottom: 13px;
text-decoration: none;
}

.thumbnail:nth-of-type(3n+3) {
margin-right: 0;
}

Я задала миниатюре ширину в 31%, что примерно 1/3 от 100%, а также параметр float:left. Таким образом, они встали по одной линии. Я также задала каждой из них параметр margin-right на 3.5%, но мне не нужно, чтобы третья миниатюра имела поле, так как у нас здесь и так есть пространство ввиду отступа колонки контента. Поэтому я применила margin-right: 0; в «.thumbnail:nth-of-type(3n+3)». «:nth-of-type(3n+3)» определяет третий элемент с классом thumbnail, и каждый третий элемент после элемента с указанным классом, и убирает поле.

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

Уроки вёрстки: Разрабатываем каркасы (прототипы) с помощью HTML и CSS

Наша страница выглядит примерно так

Разработав правильную структуру, вы без труда сможете добавлять туда нужные вам элементы и нужный контент и стили. Я разработала данный прототип на jsbin. Если вам нравится то, что вы сделали, сохраняйте проект и делитесь им с друзьями или с нашими читателями посредством поля комментариев.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Опубликовал Design FactoRy   Прочитано (раз): 17115   |   Оставлено комментариев: 3
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 17 декабря 2011 @ 12:45
Написал: Emommawep — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
http:_google.com.ua/ bad site
Комментарий #2: 11 января 2012 @ 01:27
Написал: nickolyashka — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
не лучшая статья no
Комментарий #3: 16 января 2012 @ 14:18
Написал: Design FactoRy — группа: Администраторы  
На сайте с: 21.07.2009   |   Публикаций: 3324   |   Комментариев: 500
ICQ: --- не указано ---
anray, а в Хроме,IE, Сафари как - не проверяли?
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица США
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)
Популярные публикации







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Март 2024    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
25262728293031