Уроки блочная верстка: Урок 7. Блочная верстка web-сайта. Часть 1 | Блочная верстка сайта div верстка | Уроки MODx Evo – Вёрстка страницы сайта с помощью блоков

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

Продолжаем изучать основы блочной верстки сайтов. Сегодня познакомимся со стилями. Итак, CSS или иначе Каскадный Лист Стилей. Почему каскадный объясню позднее. Открываем новый документ в PSPad (Блокноте, WordPad-е и т.п.) и вписываем следующую строку:

/* © PIG.RU, 2007 | [email protected] */

На самом деле содержимое строки не так важно. Она у нас закомментирована слэшами со звёздочками /* */

Комментарии в файле CSS

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

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

Например:

/* Header */

/* Content */

/* Sidebar */ и т.д.

Ну а теперь непосредственно пишем код!

Правила в CSS

В листе стилей код называют правилами. Каждое правило состоит из селектора (читай — атрибута) и объявления. Объявление, в свою очередь, состоит из свойства и значения.

Рассмотрим пример:

p {color: #000;}

Данная запись означает, что все абзацы будут набраны чёрным шрифтом. Здесь p — это атрибут, а то, что находится в фигурных скобках и есть Объявление правила для этого атрибута. Слово color является Свойством объявления, а «решётка» с тремя нулями — Значением. В данном случае значение записано в виде шестнадцатиричного числа, обозначающего цвет. Всем, кто пользуется Фотошопом это должно быть известно. Кто не пользуется, просто знайте: это такая запись цвета из шести знаков.

Почему всего три нуля, если в данном обозначении должно быть шесть знаков? Когда пары знаков одинаковы 00 00 00, то допускается писать сокращённо — 000. Или, например, белый цвет: FFFFFF — то же, что и FFF. Все браузеры это понимают правильно. Кстати, буквы можно использовать и маленькие — #fff. Или вот еще пример: #ff0000 — #f00. Но нельзя сократить такую запись цвета #f0f0f0.

Правило можно писать как угодно — хоть в строку, как у нас, хоть в столбик — это роли не играет. Важно только не забывать две вещи:

1. После каждого Свойства необходимо ставить двоеточие.
2. После каждого Значенияточку с запятой.

Если пропустить хотя бы в одном месте эти знаки, то IE и Firefox будут глючить, а Opera, возможно, и покажет всё без ошибок, но это может потом вам вылезти боком.

Сначала зададим общие правила для страницы:

* {
margin: 0;
padding: 0;
border: 0;
}
body {
padding: 2% 0 0;
background: #fff;
color: #333;
font-family: "Comic Sans MS", Verdana, Arial, Helvetica, sans-serif;
}
#container {
width: 760px;
margin: 0 auto;
}

Поясним:

1. В первом правиле звёздочка означает не что иное как всю страницу разом. Сама звёздочка — это не тэг и нигде потом в коде страницы не указывается. Браузеры прекрасно понимают её значение и применяют данные с ней правила ко всей странице. В правиле мы указали последовательно:

Отступы — 0,
Поля — 0,
Рамка — 0.

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

2. Следующим правилом мы задали для тела страницы следующие указания: поля — сверху 2%, с боков по нулям, снизу тоже ноль. Это значит, что наша страничка не будет лепиться к верхушке окна браузера, а отступит от него на 2% размера окна. Тут значения идут подряд без запятых и только после последнего ставится точка с запятой. Вообще у нас 4 стороны. И значения для них задаются по часовой стрелке, начиная сверху, затем правое, низ и левое. Но так как у нас по бокам одинаково, то и значений мы дали всего три.

Ещё раз:

а) 5px 10px 15px 20px; — сверху будет поле в 5 пикселей, справа 10, снизу 15, слева 20.

б) 5px 10px 15px; — сверху 5, с боков по 10, снизу 15.
в) 5px 10px; — сверху и снизу по 5, с боков по 10.
г) 5px; — со всех сторон по 5.

Думаю, принцип понятен.

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

3. А вот в этом правиле уже что-то новенькое — появилось незнакомое слово container с решёткой. Данная решётка и означает уникальность атрибута. То есть тэг div с данным атрибутом будет использован только один раз на странице.

Что такое контейнер в верстке сайта

Зачем вообще нужен контейнер? А затем, чтобы поместить нашу страничку в центр экрана монитора. Для этого мы указали у контейнера отступы: сверху и снизу ноль, а с боков auto. Это означает, что при любом размере экрана наш сайт всегда будет строго по центру. Ширина страницы при этом составит 760 пикселей.

Возникает вопрос: а почему бы у тэга body не указать такую же ширину страницы и авто-выравнивание? Дело в том, что браузеры читают данный тег body по-своему и отдают под него ВСЮ видимую область экрана. А нам это не нужно. Вот мы и приспособили эдакую «коробочку» под нашу страничку.

На сегодня это все. Продолжение следует. Оставайтесь на связи!

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

Блочная верстка сайта | Урок 1
Блочная верстка сайта | Урок 2
Блочная верстка сайта | Урок 3
Блочная верстка сайта | Урок 4
Блочная верстка сайта | Урок 5
Блочная верстка сайта | Урок 6
Блочная верстка сайта | Урок 7
Блочная верстка сайта | Урок 8
Блочная верстка сайта | Урок 9

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

Напоминаю, что это цикл статей, посвященный блочной верстке сайтов. Добро пожаловать!

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

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

Что у нас уже есть? Контейнер, в котором лежит шапка. Следом за шапкой добавим блок навигации. Находим в коде следующее место:

<div>
</div>

и сразу же за ним запишем следующее:

<div>
<ul>
<li>Главная</li>
<li><a href="#">О нас</a></li>
<li><a href="#">О летучести</a></li>
<li><a href="#">О везучести</a></li>
<li><a href="#">Свинки-герои</a></li>
<li><a href="#">Подружиццо</a></li>
</ul>
</div>

Как видим — всё просто: наши разделы оформлены, как пункты списка, и каждый пункт, кроме первого, является ссылкой. В данном случае вместо адреса несуществующих страниц мы просто вставили решётку (#), которая всегда возвращает нас на текущую страницу.

О каскадности файла стилей CSS

Теперь настала пора сказать пару слов о

каскадности стилей. В правилах для блока навигации мы вначале указали настройки для всего блока, затем для маркированного списка, обозначенного тэгом ul, далее показали правила для строк li…

Каждое последующее правило получает «в наследство» характеристики предыдущего: от nav к ul, от ul к li. Все вместе они являются вложенными в тэг контейнера и получают также от него часть правил. В частности центрирование по середине экрана и заданную ширину в 760 пикселей. Это и называется каскадом.

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

Окей! С этим разобрались. А теперь сохраняем нашу страничку. И идём скорее смотреть в браузере что получилось.

Верстка контентной части сайта

Пора уже, наконец, наполнить нашу страницу чем-нибудь полезным, то есть Контентом («…как много в этом слове…»). На макете во втором уроке видно, что полезная площадь страницы разделена на две функциональные области:

1. Основной текст (с картинками и пр.)
2. Блок новостей.

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

.........
<li><a href="#">Свинки-герои</a></li>
<li><a href="#">Подружиццо</a></li>
</ul>
</div>

Следующий код:

<div>
<img src="pig1.jpg" alt="Летящий свин" />
<p>Летать всегда! Летать везде! Летать много, очень-очень много и всегда с улыбкой на морде лица — вот наше кредо!</p>
<p>Все пиггасы рано или поздно приходят к осмыслению никчемной жизни в грязной луже и подаются в лёччики-пилоты. Причём для летания вовсе не нужна никакая посторонняя техника. Только сильное и несокрушимое желание, а также упорство, спортивная злость и немного вредности. Оно того стоит! Уж поверьте.</p>
<p>Всего лишь после недели тренировок на брезентовом батуте и трёх зачотных прыжков с крыши сарая, адепт получает звание летуна-прыгуна. При этом заработанные синяки, ссадины и шишки также засчитываются в +</p>

<img src="venzel.gif" alt="" />
<img src="pig2.jpg" alt="Пиггсы на проводе" />
</div>

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

Тэг div с атрибутом text — это и есть область полезного содержимого странички, иначе называемое контентом. Как и в любом тексте тут мы видим абзацы, обрамленные тэгами p, а также несколько изображений (тэги img).

С тэгами абзаца всё понятно: открылся один, за ним кусок текста, закрылся; открылся следующий, за ним опять кусок текста, закрылся, и т.д.

Что такое class

А вот у тэгов изображений появилось нечто новое — это слово class. Если кто помнит, то оно означает многоразовость использования данного атрибута, в противовес индивидуальному id. Кроме того, class можно использовать и вовсе без тэга div! Что мы и сделали. У тэгов изображения мы просто вписали это слово сразу же за самим тэгом.

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

<img src="папка_где_она_лежит/picture.jpg" alt="" />

Мы же записали это следующим образом:

<img src="папка_где_она_лежит/picture.jpg" alt="" />

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

Код — вещь красивая!

Еще раз для тех кто в танке с заваренной башней:
Атрибут можно и НУЖНО прицеплять к существующему уже тэгу, будь то тэг абзаца, рисунка, списка и т.п. Не надо перенасыщать страницу div-ами!

Окей! Хватит на сегодня. Хорошего понемногу. Продолжение следует!

Блочная верстка сайта | Урок 1
Блочная верстка сайта | Урок 2
Блочная верстка сайта | Урок 3
Блочная верстка сайта | Урок 4
Блочная верстка сайта | Урок 5
Блочная верстка сайта | Урок 6
Блочная верстка сайта | Урок 7
Блочная верстка сайта | Урок 8
Блочная верстка сайта | Урок 9

Уроки верстки / Habr

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

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

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

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

  1. Литература и электронные материалы.
  2. Инструментарий: редакторы.
  3. Инструментарий: браузеры и плагины.
  4. Инструментарий: утилиты и вебсервисы.
  5. Введение в верстку гипертекстовых документов.
  6. Вебстандарты: теория разделения содержимого и представления.
  7. Выбираем технологии: HTML, XHTML, CSS.
  8. Введение в селекторы.
  9. Специфичность селекторов.
  10. Базовый файл стилей и рекомендации «хорошего» CSS.
  11. Блочная модель CSS.
  12. Типичная разметка.
  13. Работа с текстом и шрифтами.
  14. Понятие багов и методы борьбы с ними.
  15. Фильтрация стилей.
  16. Работа с графикой.
  17. Практикум и эксперименты.

Пока я вижу это так, возможно будут коррективы по ходу написания и публикации. Этот мой маленький проект я назову пока, например, CSS Book. В месяц я планирую писать 3-4 поста, которые буду публиковаться в ленте блога. Также я создал отдельную страничку CSS Book, на которой будет собираться оглавление возможно будущей книги =).

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

Табличная верстка, блочная верстка сайта

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

Табличная верстка, блочная верстка сайта

Табличная верстка

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

Плюсы табличной верстки:

  1. Таблицы не перекрываются друг с другом при маленьких разрешениях;
  2. Легко достигается кроссбраузерность;
  3. Табличная верста намного проще, чем блочная.

Минусы табличной верстки:

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

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

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

Плюсы блочной верстки:

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

Минусы блочной верстки:

  1. Блочная верстка сложнее, чем табличная верстка;
  2. Часто возникают проблемы с отображением страниц в разных браузерах;
  3. При малых разрешениях экрана блоки начинают наезжать или спадать друг на друга.

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

Понравилось? Поделитесь с друзьями!

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *