Главная страница Случайная страница
КАТЕГОРИИ:
АвтомобилиАстрономияБиологияГеографияДом и садДругие языкиДругоеИнформатикаИсторияКультураЛитератураЛогикаМатематикаМедицинаМеталлургияМеханикаОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРелигияРиторикаСоциологияСпортСтроительствоТехнологияТуризмФизикаФилософияФинансыХимияЧерчениеЭкологияЭкономикаЭлектроника
Иван Сагалаев
|
|
Пример одного из вариантов верстки трехколоночной страницы
Содержимое. 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" " https://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>Если сравнить этот код с тем списком содержимого страницы, что приведен чуть раньше, то можно увидеть, что он ее полностью повторяет. Все просто.