Как разработать и кодировать гибкий сайт

В этом уроке мы будем разрабатывать и кодировать простую веб-страницу в стиле блога. Мы уделим особое внимание тому, чтобы сделать наш дизайн гибким и доступным, используя чистый и простой XHTML и CSS. Это руководство предназначено для начинающих и для всех, кто хочет улучшить доступность своего веб-дизайна.

Учебное пособие

• Сложность: Легко
• Расчетное время завершения: 1,5-2 часа

Шаг 1

Таким образом, наша примерная веб-страница будет основана на простой теме блога, с блоговой структурой WordPress, похожей на домашнюю страницу nettuts. Это будет выглядеть примерно так:

Идея здесь не в том, чтобы воспроизвести мой пример, а в том, чтобы вы могли следовать и применять методы к своим собственным проектам, надеясь узнать что-то одно или два о базовых концепциях.

Шаг 2 — Фотошоп

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

Примечание: некоторые читатели спрашивали об использовании GIMP. Я не использовал его лично, но я уверен, что вы можете выполнить следующие шаги в GIMP так же легко, потому что все, что мы используем, это базовые формы и градиенты.

Макет страницы

Я решил сделать страницу шириной 900px, так что мой документ имеет ширину 1000px и длину 1200px (не знаю, почему я оставил себе так мало места, сделайте вашу страницу шире, если хотите). Поместите направляющие на 50 пикселей и 950 пикселей, чтобы получить область шириной 900 пикселей. У нас будет область контента и боковая панель, а область контента будет иметь ширину 600 пикселей, поэтому поместите еще одно руководство на 650 пикселей.

Фон

Фон заголовка — это всего три прямоугольника для верхних ссылок, основного заголовка и области навигации. Я использовал слои формы и добавил градиенты к стилям слоя. Также есть границы в 1 пиксель между верхней панелью и областью заголовка, а также между заголовком и областью навигации.

Фон нижнего колонтитула — еще один градиент, но на этот раз с границей в 2 пикселя вверху.

Затем добавьте фон для боковой панели, я выбрал # d8ddd1.

Тип инструмента

Затем мы берем инструмент ввода (T) и добавляем логотип и слоган, а также некоторые основные навигационные ссылки. шрифты:

Название блога:

• Шрифт: бесчисленное количество Pro
• Размер: 48pt
• Цвет: #ffffff (белый)

Описание блога:

• Шрифт: бесчисленное количество Pro
• Размер: 24pt
• Цвет: #ffffff

Основные навигационные ссылки:

• Шрифт: Arial
• Размер: 18pt
• Цвет: # 2b2b2b

«добро пожаловать, гость» и «оставаться в курсе»:

• Шрифт: Arial
• Размер: 12pt
• Цвет: #fffff

«войти, зарегистрироваться» и «подписаться через …»:

• Цвет: # a5bf8d
• Стиль: подчеркивание

содержание

Мы собираемся включить только один пример «поста» в наш макет Photoshop, потому что я считаю, что работа с шрифтом в Photoshop — это настоящая боль, но мы подробнее расскажем о стилизации раздела контента позже. Шрифты, которые я использую для фиктивного поста:

Заголовок поста:

• Шрифт: Arial
• Размер: 24pt
• Цвет: # 3c3f40
• Стиль: Жирный

Дата, категория и информация об авторе:

• Размер: 11pt

Пункты:

• Размер: 12pt

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

Выберите инструмент «Срез» (C) и вырежьте тонкие кусочки каждого из фоновых прямоугольников: верхняя панель, область заголовка, навигация и нижний колонтитул. Не включайте границы, мы добавим их с помощью CSS. Попробуйте увеличить масштаб очень близко, чтобы убедиться, что вы получите правильные части. Срезы, которые я нарезаю, имеют ширину около 5 пикселей, но ширина не очень важна на этом этапе.

Выберите «Файл / Сохранить для Интернета и устройств …» Удерживая нажатой клавишу «Shift», щелкните, чтобы выбрать каждый фрагмент. Из выпадающего меню «presets» выберите «jpeg. Снимите флажок« convert to sRGB »» (я считаю, что преобразование приглушает цвета). Все остальные настройки следует оставить по умолчанию. Нажмите «Сохранить». Во всплывающем окне убедитесь, что «выбранные фрагменты» отображаются в выпадающем меню «фрагменты», и нажмите «Сохранить».

Пользователи GIMP: я не уверен, что у gimp есть такой инструмент, как ломтик, но вам просто нужно сделать прямоугольные выделения, сохранить их в отдельных документах, обрезать их и сохранить как оптимизированные JPEG-файлы.

Для более глубокого изучения процесса нарезки и сохранения см. Мой предыдущий учебник .

Шаг 3 — Настройка HTML

Если вы не знакомы с процессом организации файлов и папок для веб-страницы, снова посмотрите мой другой учебник, связанный выше.

Откройте ваш любимый редактор кода и создайте новый файл с именем index.html.
Мы попытаемся использовать как можно меньше тегов div, чтобы сделать нашу разметку содержательной и семантической. При этом для поддержания гибкого макета с изменяемыми размерами нам нужно заключить некоторые элементы в несколько элементов div. Подробнее об этом позже.

Все элементы на нашей странице будут содержаться в двух элементах div, называемых «main» и «footer». Внутри «основного» div у нас будет div для верхней панели, заголовка и области содержимого. Нижний колонтитул будет содержать внутренний div для письменного содержимого.

Топ Бар

Фон синей полосы вверху растягивает всю ширину страницы, но две текстовые области должны находиться в пределах 900px от страницы. Чтобы достичь этого, нам нужно, чтобы содержимое содержалось в другом элементе div, который будет иметь класс «container».
В нашей верхней панели у нас будет два абзаца, один для входа в систему, другой для параметров подписки. Поскольку они собираются быть плавающими, каждому нужно дать уникальный идентификатор. На самом деле, если бы мы хотели быть полностью семантическими, мы могли бы закодировать эти два абзаца как неупорядоченный список с двумя элементами списка. Попробуйте оба способа, посмотрите, сможете ли вы заставить это работать.

Шаг 5 — Заголовок

Здесь мы сталкиваемся с той же проблемой, что и на последнем шаге: фоновое изображение должно растягиваться до бесконечности. Чтобы содержать контент, нам нужно поместить его в другой div. Поскольку заголовок также будет находиться на нашей центрированной странице шириной 900 пикселей, мы можем повторно использовать класс «контейнер». Заголовок блога будет заключен в тег <h1>, а описание / слоган будет абзацем с уникальным идентификатором.

навигация

Также внутри заголовка находится меню навигации, которое будет заключено в неупорядоченный список с идентификатором «menu», которое будет заключено в другой элемент div с идентификатором «navigation».
Поскольку мы хотим, чтобы навигационное меню было центрировано, мы можем также добавить наш класс-контейнер в ul.

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

Шаг 6 — Содержание

Область содержимого не имеет фонового изображения или цвета, поэтому нам не нужно заключать ее в дополнительный элемент div. Чтобы отцентрировать его, мы можем также дать контенту div класс «container». Внутри содержимого div у нас есть еще два div, один для постов в блоге, а другой для боковой панели.

При разработке блога мы должны учитывать тот факт, что содержание будет меняться и может включать в себя любое количество элементов, включая списки, изображения, цитаты, заголовки и выделенный текст. Чтобы подготовиться, нам нужно стилизовать каждый возможный элемент, который может появиться. Поэтому наш образец контента должен включать все . Это иногда называют «методом песочницы». Чтобы получить фиктивный контент, предлагаю посетить HTML Ipsum .

Мы собираемся разделить наш пример контента на пару разных постов с заголовками, заключенными в теги <h2>. Каждый пост также будет содержать стандартную информацию о дате, авторе и т. Д., Содержащуюся в теге <small>.

Шаг 7 — Боковая панель

В типичном блоге боковая панель содержит различные виджеты, которые отображают ссылки на другие страницы или статьи, и каждый виджет обычно представляет собой неупорядоченный список тегов привязки. Здесь у нас будут виджеты «категории», «последние сообщения» и «архивы». Таким образом, наш div боковой панели будет содержать три списка, каждый с заголовком, заключенным в тег <h3>.

Шаг 8 — Нижний колонтитул

Нижний колонтитул будет работать так же, как верхняя строка, верхний колонтитул и навигация, с внешним элементом div для размещения повторяющегося фона и внутренним элементом div для центрирования содержимого и его размещения в пределах 900 пикселей на нашей странице. Для этого нам просто нужно добавить класс «container» в наш div «footer content».

В нашем нижнем колонтитуле будет три столбца: информация об авторских правах, ссылки и параметры подписки. Каждый должен будет содержаться в своем собственном div.

Хорошо, мы сделали нашу разметку! Давайте посмотрим в браузере (я использую Safari 4, который, кстати, потрясающий)

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

Шаг 9 — CSS

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

Создайте новый документ «style.css» и создайте ссылку на него в заголовке HTML-документа:

Шаг 10 — Основная очистка

Прежде всего, нам нужно знать, с чем мы работаем, что означает избавление от стилей браузера по умолчанию.

Мы собираемся использовать простой сброс CSS, чтобы избавиться от этих надоедливых полей и стилей:

У нас также есть неправильный шрифт для всей нашей страницы, давайте исправим это:

Следующий шаг выглядит довольно аккуратно: помните, как мы добавили класс «контейнер» ко всем элементам div с текстовым содержимым? Пришло время, чтобы этот контейнер содержал наш контент! Как я уже говорил ранее, мы делаем нашу страницу шириной 900px, и нам нужно сосредоточить контент.

И вот так у нас есть хорошая веб-страница по центру шириной 900 пикселей.

Шаг 11 — Начиная сверху

Мы начнем с небольшой голубоватой панели, содержащей ссылки для подписки и входа. Хорошо, первое, что мы заметили в наших двух абзацах вверху, это то, что они должны быть рядом друг с другом, а не сверху. Для этого нам нужно плавать элементы.

Как работают поплавки

Когда мы смотрим на нашу веб-страницу в браузере, мы видим кучу элементов разной ширины и высоты. Браузер, однако, видит только несколько коробок, уложенных друг на друга, причем каждый элемент занимает всю ширину контейнера. Веб-страница имеет очень простой «поток»: каждый элемент перемещается вниз по странице элементом над ним.
Чтобы два элемента сидели рядом друг с другом, нам нужно вывести их из обычного «потока» страницы.

Когда элемент перемещается, происходит несколько вещей: он застревает сбоку страницы (или другого элемента) и удаляется из обычного потока элементов, то есть вместо того, чтобы занимать всю ширину страницы, это только занимает место, которое это непосредственно занимает, позволяя элементам ниже этого перемещаться вверх рядом.

Давайте попробуем это с нашими двумя маленькими параграфами:

Загляните в браузер, и у нас проблема! Логотип h1 переместился вверх между двумя плавающими элементами. Когда вы перемещаете элементы, вы как бы говорите им «нарушать правила», единственная проблема в том, что когда вы позволяете некоторым элементам нарушать правила, другие элементы тоже начинают это делать! Нам нужен способ сообщить браузеру, что эти два абзаца и ТОЛЬКО эти два абзаца могут нарушать правила, поэтому после всплывающих элементов нормальный поток восстанавливается. Для этого нам нужно добавить правило в родительский div двух плавающих элементов, что позволяет двум абзацам внутри него плавать, не затрагивая остальную часть страницы.

Для этого нам нужно добавить свойство в содержащий div div «overflow» и установить значение «hidden».

Не очень важно понимать, что переполнено или где оно скрывается, если вы понимаете, что правило переполнения: скрытое управляет поведением плавающих элементов в div. Я не хочу никого запутывать или пугать, но эта техника не всегда работает во всех браузерах. Это работает здесь, но всегда проверяйте в IE свои собственные проекты. Есть целый ряд других техник, которые стоит отметить, и все они имеют свои преимущества. Питер-Поль Кох описывает метод, аналогичный тому, который я использую здесь, в своей статье « Очистка поплавков» . Стив Смит описывает свой метод «плавающего (почти) всего» в своем посте « Очистка поплавков: метод FnE» . Кроме того, это немного более продвинутая техника, но Тони Аслетт впервые применил довольно изобретательную и хитрую технику, описанную в статье « Как очистить плавающие объекты без структурной разметки» . Выберите метод, который лучше всего подходит для вас, и не забудьте проверить свои браузеры!

Еще одна важная вещь о float — вы всегда должны указывать ширину. Ваш CSS все равно будет проверяться, если вы этого не сделаете (вы получите предупреждение), но это лучшая практика, и вы иногда получаете неожиданные результаты в некоторых браузерах, если вы этого не делаете.

Поскольку мы хотим, чтобы размер нашего макета был легко изменяемым, мы не будем использовать значения в пикселях, вместо этого мы будем использовать проценты. Мы также можем позволить каждому элементу занимать 50% ширины. Поскольку мы предоставили ему столько места, абзац подписки переместился влево. Мы можем заставить его снова придерживаться права, указав text-align: right.

Стилизация абзацев

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

Размер шрифта с использованием ems

Мы хотим сделать нашу веб-страницу максимально доступной и гибкой, чтобы охватить как можно большую аудиторию, верно? Это включает в себя разрешение читателям изменять размер текста до удобного размера. Сейчас разные браузеры по-разному справляются с изменением размера, но, как обычно, проблемным браузером является IE / Win. В Internet Explorer, если ваш размер текста установлен в пикселях, вы не можете изменить его размер, поэтому ваш читатель застрянет с любым размером шрифта, который вы указали. Это не очень приятно, особенно для читателей с плохим зрением. Чтобы исправить эту проблему, нам нужно использовать другой юнит — эмс.

Ems — это относительная единица измерения размера — это означает ширину буквы «m» независимо от размера шрифта. Размер по умолчанию, установленный браузерами, равен 16px, поэтому 1em будет равен размеру шрифта 16px.

Чтобы сделать нашу веб-страницу полностью масштабируемой, мы можем конвертировать все размеры наших шрифтов в ems. Простой способ сделать это с помощью веб-приложения Em Calculator (лучше всего работает в FireFox).

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

Чтобы упростить математику, мы можем дать себе основание 10, установив шрифт по умолчанию на 10 пикселей вместо 16. Чтобы сделать это, мы просто указываем в нашем файле CSS, что наши шрифты должны быть 62,5% от значения по умолчанию.

Теперь нам просто нужно разделить каждый размер шрифта в пикселях на 10, и у нас есть значение em. Для начала, размер шрифта для наших двух тегов <p> в верхней части страницы составляет 12 пикселей, что составляет 1,2 ems.

Расширяемые фоны

Затем мы добавляем повторяющееся фоновое изображение, которое мы вырезали из нашего PSD:

Нам нужно добавить немного отступа к верху и низу абзацев, чтобы изображение растянулось на полную высоту. Чтобы получить правильные значения, нам нужно вернуться к нашему PSD и измерить высоту стержня с помощью инструмента линейки: у меня получается 26 пикселей в высоту. Поскольку наш текст имеет высоту 12px, общий отступ будет 26-12 или 14px. Это означает, что мы добавляем 7px отступов сверху и 7px снизу. (Эти значения иногда отключаются на пиксель или два, но это хорошее место для начала, просто продолжайте проверять в своем браузере)

Мы также могли бы заставить div растягиваться до его полной высоты, указав высоту 26 пикселей, но вы всегда должны избегать указания высоты для ваших элементов в максимально возможной степени, чтобы обеспечить максимальную гибкость. Если вы ограничите свой элемент определенной высотой, вы не сможете использовать больший текст или дополнительный контент.

Проверьте это, это выглядит так же, как наш PSD. Но вот где все становится сложнее: попробуйте изменить размер текста в вашем браузере. Когда мы увеличиваем размер текста, меняются соотношения, мы теряем нижний отступ, и текст в конечном итоге выходит за пределы фона. Чтобы сделать сайт более «неразрушимым», нам нужно, чтобы фон растягивался по мере роста текста или добавления большего количества контента, чтобы всегда было 7px отступов сверху и снизу, независимо от размера текста. , Поскольку наше фоновое изображение имеет высоту всего 26 пикселей, нам нужно что-то еще, чтобы растянуть дальше. То, что мы собираемся сделать, это в основном поместить сплошной цвет позади изображения, чтобы, когда текст становится больше и изображение не может его содержать, цвет позади него просвечивает. Цвет в нижней части нашего градиента # 08413c. Итак, давайте добавим это к нашему фону. Чтобы указать, что мы хотим, чтобы изображение всегда прилипало к верхней части элемента, чтобы цвет растягивался снизу, мы добавляем значение background-position после URL-адреса изображения.

Теперь попробуйте изменить размер текста: фон растет вместе с ним, и выглядит примерно так же, как становится больше. Это также позволяет нам знать, что если бы мы захотели добавить вторую строку контента позже, нам бы не пришлось ничего менять в нашем CSS. Способность элемента расширяться для большего или большего объема текста часто упускается из виду при веб-разработке, и это приводит к разрушению страниц при изменении размера текста. Просто зайдите на домашнюю страницу моего университета , попробуйте сделать текст на шаг больше, и вы потеряете навигационную ссылку!

Еще одна вещь, нам просто нужно добавить эту границу 1px в нижней части нашего бара:

Итак, вот где мы сейчас находимся:

Шаг 12 — Заголовок

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

Теперь давайте сделаем наши стили шрифтов:

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

Абсолютное позиционирование

Если мы хотим позиционировать элемент вне «потока» страницы без использования плавающих элементов, мы можем использовать абсолютное позиционирование, которое в основном позволяет вам позиционировать элемент в любом месте внутри div, независимо от других элементов внутри div. Это означает, что когда вы указываете позицию, скажем, left: 10px, он будет располагать элемент 10px слева от стороны div, независимо от того, есть ли там другой элемент.
Во-первых, чтобы абсолютно позиционировать элемент, нам нужно установить относительное положение родительского элемента div, поскольку элемент с абсолютным позиционированием расположен относительно родительского элемента div.

Теперь мы можем установить абсолютную позицию нашего описания. Когда используется position: absolute, мы можем указать его положение в терминах left, right, top и bottom, используя пиксели, проценты или ems. Во-первых, верх — описание почти точно на 50% от верха заголовка, поэтому давайте укажем, что:

Теперь нам нужно вытолкнуть его вправо, задав для него значение left:
если мы используем пиксели, то при изменении размера текста он будет ближе к h1, и в конечном итоге будет перекрывать его, поэтому отбросьте этот метод. Мы получаем ту же проблему с процентами, но не так резко. Лучше всего расположить его с помощью ems, который, как вы помните, увеличивается по мере увеличения размера текста, поэтому пространство между h1 и описанием останется при изменении размера текста.

И выглядит отлично!

Шаг 13 — Навигация

Давайте очистим это меню навигации, избавимся от стиля списка и оформления текста, а также добавим стили шрифта.

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

Мы, конечно же, сталкиваемся с той же проблемой, что и со всеми поплавками, но все, что нам нужно сделать, это добавить переполнение: скрыто в div навигации, и мы готовы идти дальше.

Каждый элемент списка находится на расстоянии около 45px, поэтому давайте добавим 45px отступа справа от каждого элемента.

Примечание. Все эти значения заполнения могут быть записаны как:

Сокращение для отступов (и полей) — это значения для верхнего-правого-нижнего-левого, все в одной строке. Я считаю, что лучший способ запомнить порядок — подумать о направлениях компаса: nesw.

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

Чтобы найти значение отступа, еще раз просто измерьте высоту бара (у меня 40px) и вычтите размер текста (18px), чтобы получить общее заполнение, и разделите на два: 40-18 = 22px.

Чтобы немного сдвинуть наше навигационное меню, проще всего просто добавить поле в нижней части элемента брендинга.

И, наконец, граница в 1 пиксель в верхней части панели:

Это оно! Мы сделали с заголовком! Давайте взглянем:

Шаг 14 — Содержание

Первое, что нам нужно сделать, это создать две колонки — одну для постов, одну для боковой панели. К настоящему времени это должно быть просто: просто плавающий один слева, один справа.

И … ничего не случилось. По крайней мере, это выглядит так, прокрутите вниз, и вы увидите, что ваша боковая панель застряла с правой стороны под сообщениями. Прежде чем боковая панель сможет переместиться рядом с сообщениями, нам нужно указать, сколько места может занимать div сообщений, а также указать ширину боковой панели. Опять же, мы собираемся использовать проценты вместо пикселей, чтобы при изменении размера текста боковая панель оставалась в стороне.

И нам нужно скрыть переполнение нашего содержащего div:

Отлично, у нас есть хороший маленький макет с двумя колонками!

Шаг 15 — Стилизация постов

Так как мы использовали сброс CSS, содержание нашего поста вообще не имеет стиля, и нам нужно выполнить утомительную задачу по стилизации каждого возможного элемента. Мой рабочий процесс для этого немного отличается от остальной части страницы, поскольку я на самом деле не ссылаюсь на документ Photoshop. Я считаю, что стилизация шрифтов в Photoshop — это настоящая боль, поэтому я обычно их пропускаю. Чтобы получить стили для моих сообщений, я прошёл процесс проб и ошибок. Я обычно начинаю с настроек, похожих на стили браузера по умолчанию, которые вы можете найти по этой ссылке , и настраиваю их по своему вкусу. Я не собираюсь проходить весь процесс шаг за шагом, но вот что я придумал в конце:

Который должен выглядеть примерно так:

Теперь в верхней части нашего поста около 35px, но у наших тегов h2 уже есть поле в 7px в верхней части, поэтому давайте добавим поле в 28px к верхней части div записей.

И это об этом для раздела сообщений. На боковой панели!

Шаг 16 — Боковая панель

Прежде всего, давайте добавим в этот цвет фона:

И исправьте стили шрифта:

Нам также нужно сдвинуть боковую панель на 25 пикселей (35 пикселей — отступ 10 пикселей вверху тегов h3). На этот раз, однако, мы не можем использовать свойство margin-top, потому что это переместит всю боковую панель, включая фон, вниз по странице. Мы хотим, чтобы фон начинался прямо под панелью навигации, а содержание начиналось на 35 пикселей ниже, поэтому нам нужно использовать свойство padding-top. Нам также нужно заполнить слева, справа и снизу, и справа будет звучать 25 пикселей, поэтому мы можем объявить все это в одном значении заполнения:

Но нет! Наша боковая панель больше не на стороне! Это потому, что мы добавили отступы по бокам боковой панели. Когда вы добавляете отступ к элементу, вы фактически делаете его больше. Мы только что сделали нашу боковую панель на 50 пикселей шире, поэтому теперь ширина плавающих элементов составляет более 100%. Чтобы это исправить, давайте сначала конвертируем наши 25-процентные отступы в процентные доли в 900 пикселей. Получается примерно до 2,7%, но я округляю до 3%.

Примечание: это еще одно сокращенное значение, оно означает, что верхняя и нижняя часть имеют размер 25px, а левая и правая — 3%.

Наша боковая панель теперь имеет ширину 33 + 6%, поэтому она все еще слишком широка, но все, что нам нужно сделать сейчас, это вычесть 6% из исходных 33%.

Я думал, что боковая панель выглядит немного широкой в ​​этот момент, поэтому я уменьшил ее до 25%.

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

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

Шаг 17 — Нижний колонтитул

Сначала давайте сделаем шрифт немного больше и добавим несколько стилей:

Далее мы можем добавить в наше фоновое изображение:

И так как мы хотим, чтобы он был в состоянии растягиваться, мы можем добавить цвет в нижней части градиента к нашему значению фона, как мы делали раньше:

Затем добавьте границу 2px вверху:

Давайте добавим поле и отступы сверху и снизу:

Далее мы собираемся создать три столбца с плавающей точкой. Плавающие три элемента работают почти так же, как плавающие два, мы собираемся плавать каждый столбец слева. Нам нужно объявить ширину каждого элемента с плавающей запятой, используя процентные значения для расширения.

Просто помните, что мы должны установить переполнение скрытым в родительском div.

На этом этапе я решил, что на самом деле лучше будет выглядеть, если сначала появятся ссылки и div-ы RSS, а информация об авторских правах находится справа, поэтому я изменил порядок div и установил для div авторского права значение float: right, и выровнял текст вправо.

И там у нас это есть, мы закончили кодирование и стилизацию нашей страницы!

Шаг 18 — Тестирование приемлемости

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

Давайте начнем с самого проблемного браузера: Internet Explorer 6. Я использую Mac, но пока не нашел эффективного (бесплатного) способа тестирования моих веб-страниц в Internet Explorer. Если кто-то читает это, знает какую-то магическую технику, пожалуйста, дайте мне знать. В любом случае, пришло время вывезти старую семью Dell. Чтобы установить несколько версий Internet Explorer одновременно, перейдите в Google «Multiple IE» и загрузите ZIP-файл.

Удивительно, но в IE6 все работает отлично! IE7 тоже хорошо. Размер текста можно изменить! Я также проверил эту страницу в Firefox, Opera и Camino. У меня были проблемы с установкой Google Chrome на ПК, поэтому я не мог сказать вам, работает ли он, но я думаю, что это должно произойти, из-за простоты разметки и стиля.

Вывод

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

• Подпишитесь на нас в Твиттере или подпишитесь на ленту Nettuts + RSS для ежедневных новостей и статей о веб-разработке.