До этого момента каждая статья в учебном курсе была посвящена рассмотрению только одной темы, начиная от
Основное предположение данного материала состоит в том, что вы уже знакомы со свойствами CSS float, display, и position.
Самостоятельно изучающие материал учащиеся, которые хотят сразу перейти к сути применения CSS, приглашаются, скрипя сердце, перейти к разделу этой статье "Реализация компоновки с одним столбцом" - но нужно отметить, что в этом случае они пропустят обсуждение того, как успешное планирование проекта ведет к компоновке и реализации Web-сайта.
Те же самые нетерпеливые души, которые пренебрегают предостережениями из предыдущего параграфа, также, возможно, захотят загрузить шаблоны для одного, двух и трех столбцов, которые приложены к этой статье, и будут указаны в завершение.
Статья имеет следующую структуру:
class и id#sidebar слева, несмотря на порядок исходного кодаХорошо созданный сайт обычно является результатом обдуманного, по большей части последовательного процесса, даже если сайт создан одним или двумя людьми, а не целой командой специалистов. Достаточно подробное представление такого процесса показано на рисунке 1, и из десяти показанных там шагов данная статья рассматривает четыре, в частности:
Когда эти четыре шага будут завершены, дизайнер получит большую часть информации, которая ему нужна для создания компоновок сайта, которые будут обычно иметь один, два или три столбца. Независимо от общей формы компоновки будут существовать различия между разными разделами сайта, что будет в свою очередь влиять на то, как определенные элементы и стилевые селекторы формируют общий дизайн сайта.
Даже после того как выбраны дизайн и структура остается вопрос о том, как будет обрабатываться производственная версия, если сайт должен создаваться поверх Системы управления контентом (CMS -
Эта статья подчеркивает важность упомянутых выше четырех шагов, предоставляет простую инфраструктуру для классификации контента, и описывает, как спроектировать сайт с оформленными верхним и нижним колонтитулами и столбцами.
Два следующих раздела являются некоторым специальным дополнением для других статей в этом учебном курсе, нацеленным на планирование и процесс, а не на реализацию. Их основная мысль "семь раз отмерь, один отрежь" - другими словами, сформируйте четкое понимание того, что вы собираетесь реализовать, прежде чем начинать разметку, таблицы стилей и код!
(рис 38.1) Десять обычных шагов процесса создания сайта. Те, которые в наибольшей степени соответствуют данной статье, выделены белым цветом (1. сбор требований 2. создание плана действий 3. каркас 4. эскиз, композиция, задание пространства имен 5. написание руководства по стилю оформления 6. производственные шаблоны 7. написание кода и заполнение сайта 8. тестирование 9. исправление 10. публикация)
Хороший код CSS опирается на цепочку зависимостей:
Основной момент в этой цепочке требований состоит в том, что потребности посетителей будут указывать точно на структуру, которая нужна для создания сайта, и будут поэтому управлять селекторами и методами, применяемыми в таблицах стилей.
Когда процесс сбора требований выполнен плохо, дизайнеров может ожидать встреча с проблемами, которые включают:
Когда вы определили область действия контента сайта, необходимо определить его важность для сайта в целом, и решить, какую помощь в навигации вы предоставите посетителям, чтобы его найти.
Существует также вопрос о том, что делать с таким материалом, как реклама, списки ссылок, галереи, и комментарии.
После классификации контент можно связать затем со средствами навигации сайта и заданным весом. Придание контенту веса будет обсуждаться здесь в первичном/вторичном/третичном контексте, так как важность блока контента должна отражаться его положением в порядке исходного кода документа.
Если вы работаете над проектом, в котором графический дизайн и реализация стилевого оформления являются ролями, заданными для различных людей - что часто бывает в коммерческих проектах - графический дизайнер должен полагаться на диаграммы схем сайта и каркасы (если доступны) для начала создания внешнего представления сайта. Может оказаться полезно начать с простых эскизов в качестве способа определения таких вещей, как общий мотив сайта, его согласующиеся свойства, и детали, которые могут усложнять разметку или задание class и id.
После согласования эскизов графический дизайнер может перейти к окончательным композициям, которые должны быть аналогичны снимкам с экрана, которые можно сгенерировать в браузере разработки после сдачи сайта в эксплуатацию.
С этого момента в данной статье графическому дизайну будет уделяться мало внимания, так как он был уже рассмотрен в статьях учебного курса о каркасах и композициях/макетах.
Имея в руках композиции, дизайнер может начать писать разметку и CSS. Первый шаг выполнения этой работы состоит в решении о порядке контента, вложенности элементов, классах, и id, которые будут использоваться на производственном сайте - работа, которая может быть сделана лучшим образом только в том случае, если дизайнер имеет полное понимание контента, который будет использоваться на сайте, и способа, которым он должен быть представлен.
Если следовать современным лучшим подходам к разработке и использовать парадигму Ориентированного на пользователя дизайна (
Однако цели спонсора сайта (или издателя) в действительности имеют приоритет с точки зрения команды разработчиков, так как без знания этих целей команда разработчиков не имеет возможности предвидеть цели посетителей.
"Бизнес"-цели сайта будут подпадать под одно или несколько из следующих общих определений:
Когда основные цели будут установлены, выполняется дополнительное уточнение на основе любых факторов, таких как демография, цели преобразования, и ограничения дизайна, накладываемые бюджетом проекта или природой самого контента (что может быть в случае, например, Flash-видео.).
Опыт является, несомненно, лучшим учителем, когда речь идет о проведении этой части процесса сбора требований.
При установленных задачах бизнеса - "мы хотим, чтобы наши посетители видели и делали то, это и это" - следующий шаг состоит в привлечении и направлении посетителей в те места назначения и к тем типам функций, которые лучше всего им соответствуют.
Принципиальное предположение этой части процесса проектирования состоит в том, что "посетители ненавидят затруднения". Лучшими способами удовлетворить этому предположению являются:
Эти стратегии могут включать полнотекстовый поиск, традиционные таксономически управляемые списки ссылок, или "
Обычные средства для этого включают "навигационные цепочки", ссылки на связанный контент, и визуальные сигналы, такие как контекстно-зависимый дизайн навигационных ссылок.
Эта практика тесно связана с необходимостью предоставления посетителю согласованных указателей о его положении, различие состоит в том, что в то время как цвет и компоновка средств навигации предлагают пользователю ориентировку на всем сайте, согласованное представление на страницах существенно важно для предоставления ориентировки на одной странице.
Иногда для этого достаточно просто пометить кнопку отправки словом "Поиск", но иногда может понадобиться предоставить примечание, чтобы дать посетителям сайта дополнительные инструкции.
Стили оформления, которые делают ссылки едва отличимыми от нормального текста, несогласованный дизайн кнопок, и нетипичные стили курсора (cursor) широко распространены, и все вносят свою путаницу. Высококонтрастные цвета, продуманное использование заполнения (padding) (для расширения занимаемой области интерактивных элементов дизайна), и информативные заголовки (title) обычно являются более эффективными.
На практике это требует обычно проигрывания ролей и анализа выбора посетителей. Если и до тех пор пока эти задачи не будут выполнены, сокращенным вариантом этой рекомендации будет подчинение духу Принципа
Что касается разметки и таблиц стилей, то существует несколько простых методов, которые позволяют легко следовать этим правилам:
id по определению являются уникальными, и чтобы быть полезными, классы (classes) лучше всего зарезервировать для редко встречающихся случаев (или требований представления, которые невозможно без них правильно поддерживать в унаследованных браузерах). Однако, сдерживая их использование внимательный дизайнер становится внимательнее к тем случаям, где графический дизайнер настаивает в своих разработках на потенциально дорогостоящих уровнях деталей.
id элементу body каждой страницы.Если отдельным документам (а не только разделам сайта) присваиваются маркеры таблицы стилей, значительно легче обрабатывать уникальные случаи представления. Другое преимущество размещения id в body каждой страницы состоит в том, что при использовании совместно с аналогично взвешенными навигационными элементами дизайнер сможет затем предоставить визуальные подсказки в основных средствах навигации для таких вещей, как просмотренный недавно раздел сайта, не прибегая к расширенной серверной логике.
Более конкретный способ описания этой рекомендации состоит в том, чтобы "избегать плавающих меню, создаваемых при использовании методов аналогичных Suckerfish" (http://www.alistapart.com/articles/dropdowns) (здесь можно посмотреть другой набор методов Suckerfish (http:// www.htmldog.com/ articles/ suckerfish/ dropdowns/)), известных также как раскрывающиеся меню. Существуют четкие ситуации использования такого дизайна, и все они включают большие сайты, которые полагаются на одно- и двух-столбцовые компоновки, но их часто можно избежать. С другой стороны неопытные пользователи или имеющие недостатки двигательного контроля часто находят раскрывающиеся меню трудными для использования:
Когда вы определите рамки контента, который будет обслуживаться на сайте, можно будет придать ему некоторую организацию. Организация сайта может разрабатываться различными способами (посмотрите в предыдущей статье 23 несколько примеров).
Обычно контенту можно задать некоторый приоритет, который будет определять возможные компоновки:
Кроме контента компоновка почти наверняка будет включать два других раздела:
Основные средства навигации сайта и заголовок почти всегда являются частью (или располагаются на одном уровне) верхнего колонтитула в визуальном контексте, на усмотрение каждого дизайнера остается решение, должны ли они быть сделаны частью верхнего колонтитула сайта на уровне разметки.
На начальном этапе проектирования шаблонов сайта необходимо принять решение о порядке исходного кода контента сайта, который должен быть согласован на сайте в целом.
Порядок исходного кода документа, который правильно воспроизводится без использования таблиц стилей существенно важен с точки зрения доступности и поддержки в различных информационных средах. В первом случае пользователи с недостатками зрения могут использовать так называемые считыватели экрана: пакеты программного обеспечения, которые читают для посетителя контент вслух, контент, который имеет немного или вообще не имеет смысла, если он упорядочен как попало для целей представления.
… И в то время как исходный код, организованный в оптимальном порядке для вывода на экране потребуется, вероятно, для четкости при чтении вслух, он может оказаться совершенно неподходящим для стилевого оформления для других средств медиа, таких как печать или вывод на дисплее мобильного устройства. В этом случае результатом обычно является дублирование контента, что имеет ряд недостатков:
Поэтому чаще всего внешние разделы организуют в следующем порядке:
Способ, которым эти разделы вкладываются друг в друга, будет зависеть от произвольного числа переменных требований, наиболее распространенным из которых является число статических столбцов компоновки сайта.
Откладывая в сторону вопросы таксономии, мы можем предположить, что любой заданный сайт будет охватывать некоторый ряд связанных тем в некоторой подразумеваемой области - будет ли это деятельность и продукция компании, специальные типы событий, или специфические виды развлечений, называя только несколько примеров, которые можно обычно перечислить, чтобы пробудить интерес для нетехнической аудитории.
Поэтому дизайнер-оформитель будет, скорее всего, связывать маркеры таблицы стилей как со структурными элементами контента сайта - например, элементы навигации, верхний колонтитул, основной текст - так и с областью контента, узкой или широкой.
Можно использовать различные подходы, но автор обычно присваивает следующие маркеры компоновки в своих шаблонах, маркеры, которые будут использоваться в этой статье:
#main канва контента h1 (уникальный) заголовок сайта ul#nav навигационный код сайта #breadcrumb навигационная цепочка (если используется) #bodyCopy основная статья #bodyCopy>h2 (уникальный) заголовок основного документа #sidebar вторичный контент #footer код нижнего колонтитула ul#secondaryNav вторичные средства навигации
Кроме этого - и что более важно - в элемент body каждой страницы добавляется id (как упоминалось выше), который дает некоторое указание на область действия основного контента, связанного со всем документом. Некоторые проекты генерируют также требование для задания class в элементах body.
(рис 38.2) Элементы компоновки с одним столбцом; разметка будет, скорее всего, вложена, как показано здесь
Рисунок 38.2 показывает, что #main находится непосредственно внутри body, и в свою очередь содержит все #header, #bodyCopy, и #footer.
Центрирование канвы контента выполняется добавлением (в данном случае) в таблицу стилей #main { width: 960px; margin: auto; }. (Выбранное значение width является произвольным.)
На сайте, который полностью полагается на компоновки с одним столбцом, не существует абсолютного требования включать #main; можно также легко применить для компоновки в некотором сочетании те же самые пары свойство/значение, использованные выше для #header, #bodyCopy, и #footer. Однако нет ничего семантически неправильного с включением #main, и его использование предлагает дизайнеру большую гибкость в отношении таких вещей как правила, интервалов между колонками, фоновых изображений, и создания выделения определенных элементов в структуре шаблона.
(рис 38.3) Элементы компоновки с двумя столбцами; разметка будет, скорее всего сделана, как показано здесь, при этом #sidebar будет на самом деле в исходном коде следовать за #bodyCopy
Различие между одно- и двухстолбцовыми компоновками состоит в добавлении второго контейнерного элемента для вторичного контента (( #, который фактически следует за #bodyCopy в исходном коде), и некоторые изменения в таблице стилей скорее всего будут использоваться для компоновки с одним столбцом.
Изменения в разметке, необходимые для преобразования шаблона с одним столбцом в шаблон с двумя столбцами являются очевидными, но во многих ситуациях новые правила стилей оформления не требуются.
Для этого существуют две процедуры; одна будет работать независимо от длины любого столбца, в то время как другая требует, чтобы #bodyCopy был длиннее #.
Первый и более распространенный подход состоит в использовании float:
#bodyCopy.#sidebar подходящее значение width.margin и padding для #bodyCopy и/или #footer обеспечивая существование требуемого промежутка между двумя элементами.clear: both; для #footer.Оба столбца имеют заданные значения width, так что оба будут иметь согласованные поля.
В том случае, когда # располагается по правому краю компоновки, уже описанные действия все равно должны выполниться, за исключением того, что значение float для #bodyCopy должно задаваться как left. Значение width, присвоенное #, необходимо заменить подходящим значением margin-left.
Можно также присвоить вместо width большое значение margin-left или margin-right (как потребуется) неплавающему элементу.
Второй подход, с меньшей вероятностью порождающий ошибки в Internet Explorer 6, состоит в присвоении большого значения margin-left или margin-right для #bodyCopy, как потребуется, и позиционировать абсолютно #. Однако этот подход будет менее гибким, так как в тех случаях, когда # будет длиннее #bodyCopy, предыдущий элемент будет проникать в #footer.
Более внимательное рассмотрение реализаций столбцов с помощью свойства float показывает, что когда требуются различные фоновые цвета или вертикальные линейки между столбцами, на них нельзя рассчитывать для распространения на всю длину области основного контента при применении со свойствами background-color или border.
Самое простое решение этой проблемы состоит в создании и определении фонового изображения (обычно высотой один пиксель) на одном из элементов предшественников столбцов, который - в связи с его присвоением элементу предшественнику - всегда будет повторяться сверху донизу самого высокого соответствующего столбца. Поэтому:
#main {
background-image: url(images/bg_2column.gif);
background-repeat: repeat-y;
}
Если bg_2column.gif состоит из двух полос высококонтрастного цвета, которые соответствуют более или менее точно по ширине столбцам контента, в результате будет два столбца, которые будут представляться имеющими одинаковую высоту … но на самом деле нет, что обнаружится, если вставить дальше следующие правила:
#bodyCopy {
background-color: #ccc;
}
#sidebar {
background-color: #999;
}
Выполнение этого шага не обязательно исключает необходимость применять свойства color или background-color к заданному столбцу; если используемый по умолчанию цвет текста плохо читается на одном или обоих столбцах, их фоновый цвет или цвет переднего плана должны быть явно определены в таблице стилей в
Когда в компоновку будет добавлен второй столбец, то, вероятно, будет казаться естественным поместить основные средства навигации вверху этого столбца … но как сделать это, когда средства навигации остаются в другой части структуры шаблона?
Ответ на этот вопрос лежит в позиционировании:
#header задано overflow: hidden; сделайте ##main. Почти во всех случаях будет возможно сделать это не искажая желательный порядок исходного кода.position: relative; непосредственному предку #nav , и position: absolute; самому #nav .#nav помещает его по умолчанию в верхнем левом углу его предка, задайте значения left и top для #nav требуемым по обстоятельствам образом.margin-top padding-top #sidebar (что больше подходит), чтобы отразить ожидаемую высоту #nav . В тех случаях, где высота #nav изменяется от страницы к странице или от раздела к разделу, потребуется написать несколько правил, возможно с несколькими селекторами в каждом — поэтому написанный выше совет присваивать зависимый от области контента ссылочный id (и возможно также class ) элементу body каждого документа на сайте.
(рис 38.4) Элементы компоновки с тремя столбцами; обратите внимание на два новых контейнерных элемента и другое задание id
Основными отличиями разметки, связанные с добавлением третьего столбца, являются:
Когда разметка будет сделана, получение желательной компоновки является вопросом правильного упорядочивания значений float. Не забывайте, что неплавающие контейнеры требуют настройки полей для правильного выравнивания.
Отметим, что, принимая во внимание рисунок 38.4, элементам сдвоенного столбца и третьего контейнера лучше присвоить id, которые предлагают некоторый ключ контекста, а не базовые id, предлагаемые в самой диаграмме.
| Желательное представление | Контент контейнера | Контейнер | Первый | Второй | Третий |
|---|---|---|---|---|---|
| 2–1–3 | 1+2 | left | right | none | none |
| 2–3–1 | 2+3 | left | none | left | none |
| 3–1–2 | 1+2 | right | left | none | none |
| 3–2–1 | 1+2 | right | left | none | none |
| 1–2–3 | 1+2 | left | left | none | none |
| 1–3–2 | 2+3 | right | none | right | none |
Наиболее гибкая трехстолбцовая компоновка вводит контейнерный элемент, который семантически не имеет смысла; альтернатива состоит в реализации соглашений о длине контента или порядка исходного кода, которые будут создавать обременительную нагрузку, накладываемую либо на службу поддержки (в случае требований длины контента), или на посетителей (в случае ограничений на порядок исходного кода).
Введение этого "лишенного смысла" контейнера также может создавать проблемы, когда придет время перепроектирования сайта. Рассмотрим следующий сценарий:
При начальном проектировании сайта его столбцы размещаются в порядке представления 2-3-1, но затем перепроектируется со столбцами в более традиционном порядке 2-1-3. Элемент двух-столбцового контейнера необходимо будет переместить, чтобы он охватывал контейнеры различных столбцов. Что затем?
В таком случае результат получить легко; если сайт является действительно управляемым шаблоном, то нужно (возможно) изменить несколько файлов. Если - с другой стороны - все документы на сайте используют просто одну и ту же инфраструктуру разметки, то нужно использовать метод поиска и замены. Однако это будет сделать несложно.
Общая организация разметки контейнеров будет иметь одну из двух следующих форм:
<div id="#container"><div id="primary">…</div><div id="secondary">…</div></div><div id="tertiary">…</div><div id="primary">…</div><div id="#container"><div id="secondary">…</div><div id="tertiary">…</div></div>В двух этих примерах фрагменты относящиеся к поиску и замене были выделены жирным шрифтом. Так как эти id будут уникальными в документе, и так как размещение двойных закрывающих тегов может быть предсказуемо (рядом с третьим закрывающим тегом или с #tertiary ), то запись операции поиска и замены для их изменения является относительно легкой проблемой.
До этого момента уже обсуждался материал, который должен находится в верхних и нижних колонтитулах - логотип, поиск по сайту, ссылки на информацию учетной записи пользователя, метаданные сайта - но эффективность и привлекательность верхнего/нижнего колонтитулов мало обсуждалась за рамками статей курса 9, 10 по каркасам и композиции/макетам.
Так как недостаточно нагрузить читателя нравоучениями, то лучшей идеей может быть рассмотрение трех сайтов, которые являются примечательными - либо в связи со своей популярностью, либо в связи с известностью своих издателей - с целью исследовать различные особенности их дизайна.
(рис 38.5) Необходимо отметить два момента особенно ценных для обсуждения здесь: идентичность и контраст
Идентичность
"Идентичность" является термином, который имеет специальное значение в мире рекламы и маркетинга, где он относится к торговым маркам и другим элементам дизайна, которые являются специфическими для представления коммерческого предприятия и его продукции. Сайт Cindy Li (http://www.cindyli.com/) реализует это на персональном уровне, помещая шаржированное изображение лицевого профиля в верхнем колонтитуле сайта, и характерный шрифт, чтобы задать заголовок сайта и основные средства навигации.
Способ реализации идентичности на корпоративных сайтах будет рассмотрен более подробно ниже.
Контраст
На сайте cindyli.com посетителю понятно с первого взгляда, что есть что: идентичность, канва контента, и основной контент, все размещены в определенных контурах, которые выделены своими фоновыми цветами. Кроме того, заголовок сайта и средства навигации заданы высоконтрастными относительно своего фона.
Теперь для нижнего колонтитула сайта:
(рис 38.6) Нижний колонтитул Cindy Li несколько скуден: имеется заявление об авторских правах, ссылка на сайт издательской платформы, которую она использует (что, вероятно, требуется по условиям лицензии использования), и ссылка на ленту рассылки статей, которые она публикует
В отличие от других представленных в этой статье сайтов сайт Cindy не предлагает полнотекстовый поиск, возможно по техническим причинам. Однако, так как сайт является блогом, его дизайн допускает предположение, что большинство читателей ограничивают свой интерес новым контентом.
(рис 38.7) Facebook, как многие пункты назначения социальных сетей, реализует свою идентичность с помощью определенной компоновки и цвета, так как само приложение является пунктом назначения
Подобно многим коммерческим сайтам
(рис 38.8) Подобно своему верхнему колонтитулу нижний колонтитул Facebook также небольшой, даже если принять во внимание постоянный виджет приложений в самом низу. Один интересный элемент здесь находится рядом с заявлением об авторских правах: виджет для изменения используемого по умолчанию языка пользователя
Другая широко распространенная практика, представленная нижним колонтитулом
(рис 38.9) Подобно большинству “корпоративных”сайтов, самый высокий контраст в верхнем колонтитуле имеет логотип издателя сайта … и единственный присутствующий тон совпадает с тем, который используется в логотипе
Что касается различных логотипов и других аналогичных средств проектирования, которые подчеркивают коммерческую идентичность, рассмотрим следующие примеры, которые все являются вездесущими метками предприятий, которые работают с Opera Software:
Кроме этих четырех хорошо известны и другие аналогичные примеры графического дизайна: Nike Swoosh (имя, которое было реально зарегистрировано), логотип ATT "Death Star", логотип FedEx (и стрела в белом пространстве, окруженная двумя последними буквами), и "UPS Brown" все являются примерами корпоративной идентичности, которая почти всюду известна широкой публике (по крайней мере в США).
Любой оператор сайта, который позаботится о разработке отличительной визуальной идентичности, хорошо выполнит свою работу, интегрируя эту идентичность в дизайн своего сайта, что оказывает сильное влияние на природу работы дизайнера-оформителя.
Что касается других элементов в верхнем колонтитуле сайта BNSF, кроме логотипа, наиболее заметным является использование двух режимов задания маршрута (как и в случае
(рис 38.14) Сайт BNSF имеет наиболее “традиционную”компоновку нижнего колонтитула из этих трех сайтов, размещая вторичную навигацию в отдельной визуальной плоскости с горизонтальными линейками или отличающимся фоновым цветом
При рассмотрении дизайна верхнего и нижнего колонтитулов в общих чертах становятся очевидны следующие общие черты:
Прежде чем переходить к деталям реализации читатель должен сначала проконсультироваться в List-O-Matic (http://www.accessify.com/tools-and-wizards/developer-tools/list-o-matic/), приложении, расположенном на сайте Accessify.com, которое создает элементы навигации, используя простое стилевое оформление, готовое для вставки в любую компоновку страницы.
Кроме инструментов, которые на вас работают, существует два основных подхода для размещения средств навигации:
display отдельных ссылок будет скорее всего изменено на block, а их объектам, содержащим списки, будет присвоено значение float равное left.Некоторые сайты могут также иметь страницы с одним или двумя столбцами, другие два или три; гибкость является одной из сильных сторон CSS, и одной из излюбленных тем, которую невольно используют графические дизайнеры в своем постоянном поиске полного контроля над взаимодействием с пользователем.
Обычно такие случаи реализуются частично с помощью дополнительных вставок: использование на сайте сценариев, которые позволяют добавить на страницу программным путем устойчивые фрагменты, вместо повторяющегося копирования.
Однако даже при использовании дополнительных вставок дизайнеры по прежнему встречаются с различиями в компоновке; как лучше всего это обработать?
Наиболее простой подход состоит в присоединении class к body любой страницы, которая может в этом нуждаться. Это может использовать порядковую природу, которая соответствует некоторым последовательностям компоновок, предложенных в рекомендациях по идентичности, или связанных с контентом и приводящих к мультиселекторным правилам, таким как следующие:
.about #bodyCopy,
.contact #bodyCopy,
.privacy #bodyCopy {
float: none; width: auto;
}
.about #sidebar,
.contact #sidebar,
.privacy #sidebar {
display: none;
}
Одним из недостатков такого подхода без преимуществ операторов include (простого способа сделать контент исчезающим и появляющимся по вашему желанию) состоит в том, что политики операторов машин поиска вполне могут уменьшить вес этих страниц в результатах — или в случае эффектных громоздких реализаций, совершенно исключить сайты, которые их используют. В связи с этим (среди слишком многих других факторов, которые необходимо учитывать), любые полученные организации размещения должны поддерживать некоторый вид функций включения.
Хотя и соблазнительно — особенно, если вы все еще являетесь новичком — просто сесть и начать писать разметку и код, такой процесс не создаст сам по себе особенно привлекательных, полезных, или удобных в сопровождении сайтов.
Однако, принимая во внимание контент, который будет размещен на сайте, и способ, которым он должен быть организован, можно залить любой сайт в инфраструктуру, которая вытекает из его требований.
Базовые шаблоны:
float/width/marginfloat/width/margin, если возможно, которая должна использоваться для реализации представления этих столбцов.div (или других элементов) для структуризации навигационных элементов. Укажите характеристики программного обеспечения считывателя экрана в своем ответе.Бен Хеник создает различные Web-сайты с сентября 1995 г., когда он взялся за свой первый Web-проект как академический доброволец. С тех пор большая часть его работы была сделана в качестве фрилансера.
Бен является универсалом, его навыки касаются почти любого аспекта создания и разработки сайта, от CSS и HTML до проектирования и написания текста, и до PHP/MySQL и JavaScript/Ajax.
Он живет в Лоуренсе, Канзас с тремя компьютерами и без телевизора. Вы можете прочитать больше о нем и его работе на сайте henick.net (http://www.henick.net/).
Для получения официальных документов о завершении программы дополнительного профессионального образования (удостоверения о повышении квалификации, дипломов о профессиональной переподготовке и MBA) необходимо предоставить:
Внимание! Вы можете не заказывать доставку бумажной версии официального документы, а скачать его в электронном виде и распечатать самостоятельно. Информация о выданном документе в течение 1 месяца загружается в Федеральную информационную систему «Федеральный реестр сведений о документах об образовании и (или) о квалификации, документах об обучении» - ФИС ФРДО.
Доступ на новый сайт осуществляется с использованием адреса электронной почты, который был указан вами при регистрации на "старом". Мы постарались перенести все ваши данные с прежнего ресурса, однако не исключена вероятность потери части информации.
При возникновении проблемы со входом, воспользуйтесь функцией сброса пароля
Если вы обнаружите несоответствия, пожалуйста, сообщите нам.