Иван Сагалаев

Дата добавления: 2015-07-09; просмотров: 1313; Нарушение авторских прав

Пример одного из вариантов верстки трехколоночной страницы

Содержимое. 2

Про валидацию.. 3

Верстка. 3

Организация. 3

Раскладка. 4

Шрифты.. 9

Цвета и декор. 10

Заголовок и подвал. 11

Колонки. 13

Левая колонка. 14

Колонка новостей. 15

Главная колонка. 17

Все. 18

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

Вот то, что получится в результате:

По поводу графического дизайна. Тот "дизайн", что на картинке, совершенно не претендует хоть на какую-то художественную ценность. Воспринимайте его как учебный макет.

Содержимое

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

· Шапка с названием компании

· Основное содержимое страницы:

o Собственно текст

o Навигация

§ Меню разделов

§ Поиск

o Новостная колонка

· Мета-информация о странице: всякая мелочь вроде копирайтов и контактных email'ов.

Теперь превратим все это в HTML. Вот живая страница с тестовым текстом, которая и будет дальше верстаться. Для удобства восприятия структуры вот ее код без текста:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/HTML4/strict.dtd"> <title>...</title><link rel="stylesheet" href="style.css"> <div id="title"><h1>...</h1></div> <div id="content"> <div id="main">...</div> <div id="sections"> <h2>...</h2> <ul> ... </ul> <form id="search"> ... </form> </div> <div id="news">...</div> </div> <div id="meta">...</div>

Если сравнить этот код с тем списком содержимого страницы, что приведен чуть раньше, то можно увидеть, что он ее полностью повторяет. Все просто.

<== предыдущая лекция	\|	следующая лекция ==>
	\|	Про валидацию