Вы изучаете верстку 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, и теперь можете определять макет и стили. Каждый блок контента можно разместить в любом месте страницы, а также можно указать цвет, шрифт, границу, фон, свойства выравнивания и т. д. блока.