Создание сайта. Блочная верстка сайта | Урок 8

17.12.2007 Верстка сайта 4186 Комментировать

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

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

Наш девиз — Идеальный XHTML и Кристально Чистый CSS!

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

Сегодня мы практически соберём всю Главную страницу целиком, за исключением нижней части. Про подвал, он же футер (footer) я расскажу в последнем уроке цикла. А в этот раз мы прикрутим к нашему сайту блок новостей. Достаточно часто встречающаяся и по своему полезная часть сайта.

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

Поехали!

Верстка блока новостей на веб-сайте

Открываем нашу страничку index.html. Находим вот это место:

.......... <li><a href="#">Васёк</a></li> </ol> </div> <img class="line" src="line.gif" alt="" />

и следом сразу вставляем вот этот кусочек:

</div> <div id="news"> <h3>Самые распоследние новости:</h3> <ul> <li>Всю прошедшую неделю лил жуткий дождь, и полёты временно приостановились. Самые безбашенные пиггасы, однако, всё равно кучковались стаями на проводах местной радиолинии и дружно создавали помехи. Малаццы!</li> <li>Пиггас Хмурый Пятак снова хмурый. Обещал всех урыть. Злой сильно.</li> <li>У нашего друга Боббса завтра ДР! Поздравления и подарочки просил вручать возле новой будки и непременно на виду у соседского пса Мухомора, чтобы тому завидно стало. Пляски намечаются до самого утра. При наличии на небе луны — будет весело.</li> </ul> </div> <div class="clearfloat"></div>

Что мы тут видим? Во-первых, закрывающий тэг /div, который показывает, что область основного текста закончилась. Далее идёт маркированный список новостей с заголовком 3-го уровня.

Очистка обтекания (float) в верстке сайта

В самом низу мы добавили «очистку обтекания» — clearfloat (для неё также в листе стилей пропишем свои правила, а именно очистку с обоих сторон). Для чего это надо?

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

В Opera и Firefox можно было бы обойтись и без очистки и сразу ниже писать код футера.

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

А теперь открываем наш лист стилей и допишем следующий код:

#news { background: #ffc; width: 185px; color: #665; margin: 10px 5px; float: right; } #news h3 { color: #f60; font-size: 120%; font-weight: bold; text-align: center; } #news ul { list-style: url(marker.jpg) inside; } #news li { font-size: 75%; padding: 5px 10px; }

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

С заголовком получилось хитро. Если вернуться чуток назад, то можно заметить, что у заголовка 2-го уровня (у списка участников), также задан размер шрифта в 120%.

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

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

Свои маркеры для маркированного списка

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

Как раз так мы и сделали. Нарисовали симпатишную зелёную галочку с размерами 14х17 пикселей и указали в стиле ссылку на неё — url(marker.jpg). Следом приписали слово inside. Что это значит?

Маркеры по-умолчанию не входят в сам блок текста. Когда мы задаём поля для текста, то маркеры не слушаются и вылезают за края. Это не всегда есть гуд. Поэтому мы принудительно указали им быть inside, то есть внутри колонки с текстом.

Сохраняемся и смотрим, что вышло!

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

Автор: Игорь Квентор
www.websovet.com