Начало работы с макетом веб-страницы DIV+CSS

Вы изучаете верстку CSS? Вы все еще не можете полностью освоить верстку на чистом CSS? Обычно есть две ситуации, которые мешают вашему обучению:

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

Другая причина заключается в том, что вы не понимаете эти очень знакомые свойства слоя представления (такие как cellpadding, hspace, align=left и т. д.) и не знаете, в какие операторы CSS их преобразовать. Как только вы решите первую проблему и узнаете, как структурировать свой HTML, я дам вам список с подробным описанием того, какой CSS использовать для замены исходных атрибутов представления.

Структурированный HTML

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

Если вы хотите, чтобы ваша HTML-страница была оформлена с использованием CSS (CSS-дружественного), вам нужно вернуться назад и начать все сначала. Не думайте сначала о «внешнем виде», а сначала подумайте о семантике и структуре содержимого вашей страницы.

Внешний вид – не самое главное. Хорошо структурированная HTML-страница может быть представлена ​​в любом виде, и CSS Zen Garden — классический пример. CSS Zen Garden помогает нам, наконец, осознать силу CSS.

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

начать думать

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

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

Обычно мы используем элементы DIV для определения этих структур, примерно так:

<div id=header></div>

<div id=content></div>

<div id=globalnav></div>

<div id=subnav></div>

<div id=search></div>

<div id=магазин></div>

<div id=footer></div>

Дело не в макете, а в структуре. Это семантическое описание блоков контента. Когда вы поймете свою структуру, вы сможете добавить соответствующий идентификатор в DIV. Любой блок контента может содержаться в контейнере DIV, и в него может быть вложен другой блок DIV. Блоки контента могут содержать любые элементы HTML — заголовки, абзацы, изображения, таблицы, списки и т. д.

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

Использование селекторов — замечательная вещь

Имя идентификатора — это средство управления определенным блоком контента. Обернув этот блок контента DIV и добавив уникальный идентификатор, вы можете использовать селекторы CSS, чтобы точно определить внешний вид каждого элемента страницы, включая заголовки, списки и изображения. , ссылки или абзацы и т. д. Например, если вы напишете правило CSS для #header, оно может полностью отличаться от правила изображения в #content.

Другой пример: вы можете использовать разные правила для определения стилей ссылок в разных блоках контента. Примерно так: #globalnav a:link или #subnav a:link или #content a:link. Вы также можете определить разные стили для одного и того же элемента в разных блоках контента. Например, определите стиль p в #content и #footer через #content p и #footer p соответственно. Структурно ваша страница состоит из картинок, ссылок, списков, абзацев и т. д. Эти элементы сами по себе не влияют на то, на каком сетевом устройстве они отображаются (КПК, мобильный телефон или интернет-телевидение). Их можно определить как внешний вид в любом исполнении.

Тщательно структурированная HTML-страница очень проста, и каждый элемент используется для структурных целей. Если вы хотите сделать отступ для абзаца, вам не нужно использовать тег blockquote. Просто используйте тег p и добавьте правило CSS-полей к p, чтобы добиться цели отступа. p — это структурированный тег, а поля — атрибут представления. Первый принадлежит HTML, а второй — CSS. (Это разделение структуры и выражения.)

Хорошо структурированные HTML-страницы практически не содержат атрибутивных тегов. Код очень чистый и краткий. Например, исходный код <table width=80% cellpadding=3 border=2 align=left> теперь может писать только <table> в HTML, а все, что контролирует производительность, написано в CSS. В структурированном HTML In , table. — это таблица, а не что-либо еще (например, используемое для макета и позиционирования).

Практикуйтесь в структурировании себя

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

<div id=navcontainer>

<div id=globalnav>

<ul>список</ul>

</div>

<div id=subnav>

<ul>еще один список</ul>

</div>

</div>

Вложенные элементы div позволяют определить дополнительные правила CSS для управления представлением. Например, вы можете задать #navcontainer правило для центрирования списка справа, задать #globalnav правило для центрирования списка слева и задать #subnav другое. Правило полностью центрировать список. Различные выступления.