Флексагон

Влад Мержевич Вёрстка веб-страниц htmlbook.ru Вступление HTML изначально задумывался как язык, которому не нужны средства оформления, такие как цвет, размер, рамки или что-то подобное. Разработанный в Европейском институте физики частиц (CERN), HTML был игрушкой ученых, их, прежде всего, интересовала логика информации, а не её визуальное представление. Тогда ещё не существовало понятия веб-дизайна и вёрстки как таковой, все сайты по своему оформлению были практически однотипными, в стиле, называемом сейчас «академический дизайн». Пример до сих пор можно посмотреть на lib.ru. Однако пользователи преимущественно думали иначе и, глядя на красивую картинку, отдавали предпочтение именно ей. Разработчики браузера Netscape понимали это и вводили в HTML новые теги, улучшающие внешний вид документа. Эти теги не были стандартизированы и работали только в Netscape, что в эпоху повального засилья этого браузера, не имело значения. Доля Netscape составляла более 90% от всех существующих браузеров. Влияние Netscape оказалось губительным для академического дизайна, фактически похоронив его и благотворным для становления веб-дизайна. Разработчики сайтов поняли, что дизайн это не просто разноцветный текст и вставленные наобум картинки. Это возможность красочно и эффектно подать материал, придать определённое настроение сайту, заинтересовать посетителя и задержать его. Дизайн стал непосредственным этапом разработки сайта, за которым последовала и вёрстка. Нарисованные в Фотошопе макеты следовало превратить из картинки в набор изображений, стилевых и HTML-файлов, способных быстро загружаться по сети, сохраняя при этом особенности дизайна. Век Netscape продолжался до тех пор, пока часть рынка браузеров не захватила Microsoft со своим браузером Internet Explorer, что в итоге принесло только головную боль разработчикам сайтов. Разные подходы Netscape и Internet Explorer к отображению сайта, противоречивая поддержка стилей и тегов, большое количество мелких ошибок привело к тому, что сайт приходилось тестировать и отлаживать долгое время. Устаревшие версии браузеров не в полной мере поддерживали CSS (Cascading Style Sheets, каскадные таблицы стилей), поэтому код представлял собой окрошку из HTML и CSS. Это привело к тому, что для макетов стали применяться таблицы с невидимой границей, на долгое время ставшими стандартом дефакто. Следующим этапом развития разработки сайтов стало рождение спецификации, которая была названа Cascading Style Sheets Level 2, сокращенно CSS2. Следом появилось обновление Cascading Style Sheets Level 2 Revision 1 (CSS 2.1), которое используется по сей день. Выпуск новых версий браузеров, поддерживающих, пусть и не в полной мере, эту спецификацию, серьёзно облегчил работу над сайтами. В итоге, начал происходить постепенный переход от табличной вёрстки к блочной или, как она ещё называется, вёрстке слоями, в которой расположение элементов на странице и их вид задаётся через стили. В настоящее время уже можно заявить, что табличная вёрстка в большинстве своём является архаизмом. Тем не менее, существует ещё множество сайтов вроде yandex.ru, lenta.ru и других, свёрстанных именно при содействии таблиц. Такой консерватизм связан со следующими обстоятельствами. Вёрстка слоями сложнее, чем таблицами, поскольку требует от разработчика глубоких знаний спецификации CSS. Браузеры содержат разные ошибки при интерпретации стилевых свойств, поэтому необходимо знать особенности поведения основных браузеров, их ошибки и уметь обходить их. Практически каждую задачу можно решить несколькими способами, от разработчика требуется выбрать оптимальный, т.е. наименее затратный по времени и усилиям. Для оценки оптимальности требуется практический опыт, чтобы иметь в запасе разные методы, применяемые в конкретных ситуациях. Таким образом, вёрстка в простом понимании это процесс превращения работы дизайнера в вебстраницу, отображаемую в браузере. Но один и тот же результат можно получить разными методами и уже от верстальщика зависит, какой из них предпочесть. От такого выбора зависит результат работы сайта, быстрота его отображения, доступность для разных устройств и браузеров. Запугал вас всеми этими сложностями и ответственностью? В конце концов, у вас же есть книга по вёрстке, которая, может, не содержит ответы на все вопросы, но здорово поможет разобраться с ними. Только помните, что вёрстка это практическая дисциплина и самостоятельно решая разные задачи и работая над проектами, вы сможете освоить это искусство гораздо быстрее. Для кого эта книга Для новичков мы расскажем, как использовать на своей странице стили, как их применять для оформления элементов — ссылок, рисунков, таблиц, форм и списков. Подробные примеры, описание всех действий и комментарии позволяют легко воспроизвести приведенные технологии на практике и модернизировать код под свои нужды. Опытные пользователи получат более подробные сведения об особенностях популярных браузеров и о том, как они работают с тегами и стилями. Это позволит учитывать различия между браузерами и создавать универсальные документы, которые будут корректно в них отображаться. Наконец, искушенные специалисты по созданию сайтов смогут использовать книгу как справочное руководство, заглядывая в нее для получения информации об ошибках браузеров и нестандартном применении некоторых стилевых свойств. Как организована книга Материал в книге представлен так, что ее можно читать последовательно с самого начала или пользоваться ею в качестве справочника, заглядывая в ту главу, которая в данный момент больше всего интересует. Все главы следует рассматривать как независимые — это позволяет вам сразу перейти к теме, которую вы считаете для себя более важной. Однако между ними существует и взаимосвязь, поэтому, чтобы не повторять дважды одни и те же приёмы, на них дается ссылка. Кроме того, следует понимать, что множество техник очень тесно переплетены между собой, и их невозможно без повторений отнести к одной теме. Так что разные приемы в некотором смысле разбросаны по главам, но стройно и логично следуют один из другого. В первый раз рекомендуется прочитать книгу с самого начала, а затем обращаться к нужному разделу по необходимости. Книга состоит из десяти глав. Глава I. Введение в CSS. Описаны основные принципы спецификации CSS и применение их на практике для управления видом элементов. Глава II. Режимы браузеров. Перечислены режимы работы браузеров, способы переключения между ними и основные их особенности. Указана взаимосвязь режимов с элементом , даны рекомендации по его использованию. Глава III. Принципы вёрстки слоями. Перечислены фундаментальные принципы вёрстки, описано поведение разных элементов: блочных, строчных, плавающих. Рассказано про позиционирование элементов на странице. Глава IV. Вёрстка с помощью таблиц. Описаны особенности таблиц, изменение их вида с помощью стилей, приведены двух и трёхколоночные макеты на основе табличной вёрстки. Глава V. Браузер Internet Explorer. В главе объясняется модель отображения разных версий браузера, перечислены их ошибки и способы обхода. Глава VI. Макеты, применяемые на сайтах. Приводятся различные виды макетов: фиксированные, резиновые, комбинированные и способы создания одно, двух и трёхколоночных макетов разного вида. Глава VII. Типовые элементы веб-страницы. Представлены способы вставки различных элементов на страницу вроде меню, форм, изображений, модальных окон и др. Глава VIII. Вёрстка сайта на практике. На примере конкретного сайта пошагово рассматриваются этапы его вёрстки. Глава IX. Использование HTML5. В этой главе указаны новые теги HTML5, показано их применение на практике. Глава X. Тестирование и отладка готового кода. Разные инструменты для облегчения работы по вёрстке, отыскания ошибок отображения веб-страниц и их исправления. Поддержка Ваши замечания, предложения и вопросы направляйте автору на адрес электронной почты Обозначения Для удобства и наглядного представления материала используется разделение по цветам различных элементов. — тег, стилевой селектор. align — атрибут тега, стилевое свойство, ключевое слово или выделение. right — значение. layer — имя класса или идентификатора. File > Open — пункт меню указанной программы. Tab — клавиша на клавиатуре. Этот символ призван привлечь внимание к некоторому замечанию по тексту. Браузеры В таблице с браузерами встречаются такие изображения: — свойство полностью поддерживается браузером со всеми допустимыми значениями; — свойство браузером не воспринимается и игнорируется; — свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации; — свойство понимается браузером, но при его работе возможно появление различных ошибок. В примечании обычно указывается, какого рода ошибки обнаруживаются в браузере. Примеры Как правило, примеры содержат список браузеров, в которых проверялся код. Для сокращения места браузеры обозначаются двумя буквами с номером версии. IE — Internet Explorer. Cr — Google Chrome. Op — Opera. Sa — Apple Safari. Fx — Mozilla Firefox. Работоспособность примера в браузере помечается цветом, совпадающим с цветами в таблице с браузерами. Глава I Введение в CSS Инструменты Прежде чем приступать к работе, необходимо позаботиться о своем рабочем месте и обеспечить его требуемыми инструментами. К ним относятся редактор для правки стилей и браузер. Редактор CSS-файл представляет собой обычный текстовый документ, поэтому для его правки подойдет любой редактор, даже Блокнот, входящий в стандартный комплект Windows. Но все же лучше выбрать редактор, позволяющий одновременно работать с несколькими документами, имеющий подсветку синтаксиса и множество других полезных возможностей. Также желательно, чтобы программа была бесплатной. Среди программ, удовлетворяющих приведенным условиям, есть несколько. Далее перечислим их с кратким описанием. PSPad Небольшой и быстрый текстовый редактор, позволяет добавлять в текст стилевые свойства простым нажатием средней кнопки мыши. Notepad++ Позиционируется разработчиками как замена стандартного Блокнота. И надо отметить, этот редактор гораздо лучше морально устаревшей программы. Браузер Браузер это программа, предназначенная для просмотра веб-страниц. Из-за того, что основные браузеры используют для отображения документа свой собственный «движок», одна и та же страница может довольно сильно различаться при просмотре в разных браузерах. Разумеется, сайт надо делать так, чтобы максимально полно охватить аудиторию, поэтому приходится завести целый «зверинец», чтобы тестировать результат. На сегодняшний день наибольшей популярностью пользуются пять браузеров: Firefox, Internet Explorer, Opera, Safari и Chrome. Mozilla Firefox Перспективный и развивающийся браузер, получивший признание во всем мире. Его особенность — простота и масштабируемость, которая удаётся за счет специальных расширений, как они называются. Изначально Firefox имеет набор только самых необходимых функций, но, устанавливая желаемые дополнения, в итоге можно нарастить браузер до системы, выполняющей все необходимые для вашей работы действия. Браузер Firefox является открытой системой, разрабатываемый группой Mozilla. Firefox, FF (сокр.), Fx (сокр.), Огнелиса (жарг.), лиса (жарг.), лисичка (жарг.) Microsoft Internet Explorer Один из старейших браузеров, который бесплатно поставляется вместе с операционной системой Windows. Это и определило его популярность. К сожалению, различные версии этого браузера работают довольно противоречиво, поэтому для тестирования сайта приходится одновременно использовать седьмую и восьмую версию Internet Explorer. Вскоре ожидается выход девятой версии программы, бета-версия которой уже доступна для скачивания. MSIE, IE (сокр.), ИА (жарг.), осел, ослик (жарг.) Opera Быстрый и удобный браузер, поддерживающий множество дополнительных возможностей, повышающих комфортность работы с сайтами. Опера, Op (сокр.) Safari Разработаный компанией Apple этот браузер встроен в в iPhone и операционную систему MacOS на компьютерах Apple. Также имеется версия под Windows. Chrome По сравнению с остальными является самым свежим браузером, появившимся на рынке в конце 2008 году. Разработан компанией Google. Хром, Cr (сокр.) Введение в CSS HTML задает основную структуру веб-страницы, а также указывает, какие элементы на ней присутствуют. Само оформление веб-страницы, положение и вид элементов возложен на стили или CSS (Cascading Style Sheets, каскадные таблицы стилей). Когда говорят о вёрстке веб-страниц, подразумевается синергия HTML и CSS. Что такое синергия? Сам HTML не представляет отдельного интереса, в силу своей простоты и ограниченности. Также и CSS не играет отдельной роли, поскольку привязывается к определенным элементам кода и задает их оформление. Поэтому работая вместе в одной связке, они превращают скромную страницу в тот документ, который придумал и нарисовал дизайнер. Такое взаимное усиление свойств, суммирующий эффект и является синергией. Любая веб-страница это, по сути, комбинация HTML-кода и CSS-кода. Без основных знаний этих технологий не получится грамотно сверстать ни один документ. Поэтому первая глава посвящена основам CSS и его применению на практике. Если вы считаете, что это уже вам известно, можете пропустить эту главу и перейти к следующей. Что такое стили? Стили представляют собой набор параметров, управляющих видом и положением элементов вебстраницы. Чтобы стало понятно, о чем идет речь, посмотрим на рис. 1.1. Рис. 1.1. Веб-страница, созданная только на HTML Это обычная веб-страница, оформленная без всяких изысков. Тот же самый документ, но уже с добавлением стилей приобретает совершенно иной вид (рис. 1.2). Рис. 1.2. Веб-страница, созданная на HTML и CSS Перемена разительна, поэтому заглянем в код, чтобы понять, в чем же разница (пример 1.1). Пример 1.1. Исходный код документа XHTML 1.0 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6 Флексагон
Флексагон

Флексагон представляет собой бумажную фигуру, которая имеет три и более стороны. Поначалу кажется, что это невозможно, но вспомните ленту Мёбиуса, она ведь имеет всего одну сторону, в отличие от листа бумаги, и, тем не менее, реальна. Так же реален и флексагон, который легко сделать и склеить в домашних условиях. Он выглядит как двухсторонний шестиугольник, но стоит согнуть его особым образом, и мы увидим третью сторону. Легко убедиться, что мы имеем дело именно с тремя сторонами, если раскрасить их в разные цвета. Перегибая флексагон, по очереди будем наблюдать все его поверхности.
Сам код HTML никаких изменений не претерпел и единственное добавление — это строка . Она ссылается на внешний файл с описанием стилей под именем style.css. Содержимое этого файла показано в примере 1.2. Пример 1.2. Содержимое стилевого файла style.css body { font-family: Arial, Verdana, sans-serif; /* Семейство шрифтов */ font-size: 11pt; /* Размер основного шрифта в пунктах */ background-color: #f0f0f0; /* Цвет фона веб-страницы */ color: #333; /* Цвет основного текста */ h1 { color: #a52a2a; /* Цвет заголовка */ font-size: 24pt; /* Размер шрифта в пунктах */ font-family: Georgia, Times, serif; /* Семейство шрифтов */ font-weight: normal; /* Нормальное начертание текста */ p { text-align: justify; /* Выравнивание по ширине */ margin-left: 60px; /* Отступ слева в пикселах */ margin-right: 10px; /* Отступ справа в пикселах */ border-left: 1px solid #999; /* Параметры линии слева */ border-bottom: 1px solid #999; /* Параметры линии снизу */ padding-left: 10px; /* Отступ от линии слева до текста */ padding-bottom: 10px; /* Отступ от линии снизу до текста */