7 уроков качественной html-верстки
Наверняка вы часто видели советы по верстке, собранные в виде длинного файла вопросов и ответов. Это очень полезная информация, однако html-страницу обычно приходится верстать «от» и «до». Когда я начинала заниматься web-дизайном, я смотрела исходные коды других сайтов и пыталась в них разобраться. Но зачем подсматривать? Перед вами – подробно разобранный пример одной верстки по типичному шаблону.
Итак, у нас есть макет страницы (допустим, в формате Photoshop). На рисунке – его уменьшенное изображение. Теперь откройте html-страницу, которую мы должны сверстать из этого макета. Она выглядит абсолютно одинаково в Internet Explorer, Opera и Firefox. Попробуйте свернуть окно до размеров 640х480, а потом развернуть на весь экран. Как видите, вся страница хорошо растягивается, даже формы ввода:) Теперь отключите изображения в вашем браузере – страница осталась вполне читаема.
В уроках, которые вы сейчас читаете, мы подробно рассмотрим технологию такой верстки, чтобы html-страница:
- не зависимо от разрешения экрана, браузера (возьмем самые популярные: IE, Firefox, Opera), темы оформления Windows и настроения вебмастера, выглядела бы одинаково – как на макете;
- была «читаемой» даже при отключенной графике;
- имела легкий, удобный для редактирования html-код;
- растягивалась на полную ширину экрана.
Создайте файлы index.html и style.css. В процессе верстки мы постараемся большую часть форматирования вынести в style.css, т.к.:
- размер html-страниц будет меньше;
- если вы в будущем захотите отредактировать дизайн сайта, вам не понадобится менять все html-файлы – только style.css.
Наметим «каркас» нашей страницы. Удобно делать его в виде таблицы 100%-й высоты, разделенной на 3 горизонтальные области – Top, Text и Bottom. Top и Bottom имеют фиксированную высоту, а ячейка Text растягивается по высоте на всю оставшуюся часть экрана. Таким образом, даже когда на странице мало или совсем нет текста, Bottom всегда находится там, где ему положено – внизу.
Мы сделаем разметку немного сложнее, т.к. нам нужно, чтобы блоки Search, News, Copyright были равны по ширине. Лучший способ этого добиться – поместить их в ячейки таблицы, расположенные одна над другой.
Вот получившийся html-код (я специально поставила параметр border='1' в теге <table> и написала внутри каждой ячейки ее название, чтобы мы удостоверились, что сделали разметку правильно. Потом все это нужно будет удалить.
|
index.html
|
<html>
<head>
<title>Layout</title>
<link href='style.css' rel='stylesheet' type='text/css'>
</head>
<body>
<table class='main' border='1'>
<tr>
<td class='top' colspan='2'>top</td>
</tr>
<tr>
<td class='search'>search</td>
<td class='topmenu'>topmenu</td>
</tr>
<tr>
<td class='news'>news</td>
<td class='text'>text</td>
</tr>
<tr>
<td class='copyright'>copyright</td>
<td class='bottommenu'>bottommenu</td>
</tr>
</table>
</body>
</html>
|
|
style.css
|
table.main {
width: 100%;
height: 100%;
}
td.top {
}
td.search {
}
td.topmenu {
}
td.news {
width: 30%;
}
td.text {
width: 70%;
height: 100%;
}
td.copyright {
}
td.bottommenu {
}
|
Для каждой ячейки был создан класс в style.css. Посмотрите на первый рисунок. Пока эти классы пустые, наша таблица в браузере не не очень похожа на ту, которая на макете. Чтобы она выглядела так, как на втором рисунке, необходимо внести еще несколько изменений.
1) Чтобы не было промежутков между таблицей и границами экрана, пишем:
html, body {
margin:0px;
padding:0px;
}
|
2) Чтобы убрать зазоры между ячейками, добавляем в свойства таблицы border-collapse: collapse (это аналог html-параметра cellspacing='0').
table.main {
border-collapse: collapse;
}
|
3) Чтобы убрать отступы внутри ячеек, пишем:
Также нужно прописать несколько общих параметров, которые будут использоваться по умолчанию:
5) Цвет фона для <body> и элементов форм. Когда фон белый, об этом часто забывают. Тогда у пользователей, установивших какую-нибудь экзотическую тему оформления Windows, некоторые ячейки могут оказаться, например, зелеными :)
6) Когда большая часть текста будет написана одним шрифтом (в нашем случае – Tahoma 11px, черный), имеет смысл указать его сразу для всех ячеек и элементов форм.
7) По умолчанию текст и изображения располагаются (вертикально) в середине ячейки. Обычно удобнее, чтобы они подтягивались к верхнему краю. Для этого нужно указать vertical-align: top для всех ячеек.
body, input, select, textarea {
background-color: #ffffff;
}
td, input, select, textarea {
font-family: Tahoma;
font-size: 11px;
color: #000000;
vertical-align: top;
}
|
Каркас готов!
Источник:
http://www.pastukhova.com
| 
Новости
Это Актуально!
