Макет сайта html: Макеты | htmlbook.ru

Grid все еще очень новый, и поэтому поддержка браузеров ограничена. Хорошая новость заключается в том, что большинство основных браузеров начали поддерживать сетку с марта 2017 года, так что колеса определенно находятся в движении. Но все еще есть много пользователей Интернета, использующих браузеры без сетки.

Итак, до тех пор, пока сетка не получит широкую поддержку браузерами, для поддержки браузеров без сетки вам нужно будет использовать другие методы для макетов вашего веб-сайта, такие как CSS float (со свойством float ) и / или flexbox (с flex и сопутствующие объекты).

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

Эволюция макетов веб-сайтов

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

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

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

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

Здесь на помощь приходит макет сетки CSS. Макет сетки был разработан специально для создания двухмерных макетов. С помощью сетки весь макет веб-сайта строится с использованием двухмерной сетки.Каждый элемент можно точно расположить, при необходимости он может сжиматься или растягиваться. И, что самое главное, сетка чрезвычайно проста в использовании.

Макет страницы | HTML Dog

Позиционирование

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

• static - это значение по умолчанию, которое отображает поле в обычном порядке, как они отображаются в HTML.
• относительный очень похож на статический , но прямоугольник может быть смещен от исходного положения с помощью свойств верхний , правый , нижний и левый .
• absolute вытаскивает коробку из обычного потока HTML и доставляет ее в отдельный мир. В этом безумном маленьком мире абсолютный блок можно разместить в любом месте страницы, используя вверху , справа , внизу и слева .
• fixed ведет себя так же, как absolute , но он будет позиционировать поле абсолютно относительно окна браузера, а не веб-страницы, поэтому фиксированные поля должны оставаться точно там, где они находятся на экране, даже при прокрутке страницы.

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

Макет с использованием абсолютного позиционирования

Вы можете создать традиционный макет из двух столбцов с абсолютным позиционированием, если у вас есть что-то вроде следующего HTML:

 

    

        
  Это  
        
  Это  
        
  Другой  
    



     
 Банджо ра-ра-банджо 
 
    
 Добро пожаловать на страницу банджо Ра-ра-банджо. Ра ра банджо банджо. Ра ра банджо банджо. Ра ра банджо банджо. 
    
 (Ра-ра-банджо, банджо) 

  

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

И если вы примените следующий CSS:

 
#navigation {
     Позиция : абсолютная; 
      верх: 0; 
      осталось: 0; 
    ширина: 200 пикселей;
}

#содержание {
    маржа слева: 200 пикселей;
}
  

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

Новый раздел примеров! Посмотрите на весь этот код в действии и поиграйте с ним.

Как до глупости просто! И вы не ограничены этим подходом с двумя столбцами. Благодаря грамотному позиционированию вы можете расположить столько блоков, сколько захотите. Если вы хотите добавить, например, третий столбец, вы можете добавить в HTML блок «navigation2» и изменить CSS на:

 
#navigation {
    позиция: абсолютная;
    верх: 0;
    слева: 0;
    ширина: 200 пикселей;
}

# navigation2 {
    позиция: абсолютная;
    верх: 0;
    справа: 0;
    ширина: 200 пикселей;
}

#содержание {
    маржа: 0 200 пикселей; / * установка верхнего и нижнего полей на 0 и правого и левого полей на 200 пикселей * /
}
  

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

Плавающий

Плавающий прямоугольник смещает его вправо или влево от строки, а окружающее содержимое обтекает его.

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

Используя float , вы можете float: left или float: right .

Работая с тем же HTML, вы можете применить следующий CSS:

 
#navigation {
      поплавок: левый; 
    ширина: 200 пикселей;
}

# navigation2 {
      поплавок: правый; 
    ширина: 200 пикселей;
}

#содержание {
    маржа: 0 200 пикселей;
}
  

Затем, если вы не хотите, чтобы следующее поле обтекало плавающие объекты, вы можете применить свойство clear :

• очистить: слева очистит слева плавающие ящики
• очистить: правый очистит правые плавающие ящики
• очистить: оба очистят и левый, и правый плавающие боксы.

Итак, если, например, вам нужен нижний колонтитул на вашей странице, вы можете добавить кусок HTML…

 

    
 Нижний колонтитул! Ура! 

  

… а затем добавьте следующий CSS:

 
#footer {
      ясно: оба; 
}
  

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

Это было общее введение в позиционирование и перемещение с акцентом на более крупные «фрагменты» страницы, но помните, что эти методы также могут применяться к любому блоку внутри этих блоков.Комбинируя позиционирование, перемещение, поля, отступы и границы, вы должны быть в состоянии представить любой веб-дизайн, который может вызвать ваше маленькое озорное воображение. Лучший способ учиться? Тинкер! Играть в! Идти!

Макеты страниц »Лучшие практики веб-дизайна

Ищете уроки? Начать!

Некоторые из фундаментальных принципов, лежащих в основе макета страницы.

Доступ ко всему разделу «Принципы веб-дизайна» можно получить через меню ниже.

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

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

Существует миллион способов разметки веб-сайта, от очень простых до невероятно сложных.Если вы выполните поиск в Google по запросу «макет CSS», вы поймете, что я имею в виду. Но прежде чем мы двинемся дальше, давайте посмотрим, что дизайнеры делали в дикие, пушистые и семантически неточные дни прошлого.

Основы макета

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

• Легко ли перемещаться по сайту?
• Легко ли пользователям находить контент на каждой странице?
• Легко ли пользователям найти на сайте то, что им нужно?
• Сведено ли время загрузки к минимуму? (Граннелл, помимо прочего, имеет в виду большие графические файлы, несколько файлов JavaScript и все, что вызывает медленную загрузку сайта.)
• Подходит ли сайт и актуален ли он для своей целевой аудитории?
• Использует ли сайт знакомые условные обозначения?

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

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

Веб-дизайнер и гуру маркетинга Тим Прибе отмечает, что макет сайта должен определяться их содержанием. Он пишет:

На хорошем сайте есть несколько разделов с большим количеством информации.

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

Основные элементы конструкции

По сути, HTML-страница содержит несколько важных элементов:

• DOCTYPE
• корневой элемент
• голова
• метаданные
• название
• кузов

Звучит сложно, не правда ли? Это не так плохо, как кажется. Вот принципиально простой HTML-шаблон, основанный на том, что я использую в повседневном кодировании.Элементы были помечены (так что, если вы используете это для себя, не включает в себя оранжевые метки!).

  DOCTYPE

 корневой элемент
 голова
    метаданные

 название



 тело


 

Подробнее о различных элементах:

Подробнее о DOCTYPEs .

Корневые элементы заключают в себе все остальные элементы HTML-страницы. Они также устанавливают язык страницы (в данном случае «en» вместо «английский»).

Заголовок HTML-страницы содержит информацию «заголовка»: заголовок страницы, мета-теги , информацию о таблицах стилей и JavaScript, а также другие полезности.

Подробнее о метатегах .

Элемент title требуется начиная с HTML 4.01. Он может содержать только символы ASCII - буквы, цифры и основные знаки препинания. Также могут быть включены специальные символы или символьные объекты. Заголовок - это то, что отображается в закладках пользователя или в списке избранного и часто (не всегда) отображается поисковыми системами. Кроме того, они - первое, что объявляет программа чтения с экрана, поэтому они являются ключевым элементом доступности.

Подробнее о доступность .

Наконец, элемент body содержит фактическое содержимое сайта.За исключением заголовка, все, что вы видите на экране браузера, содержится в теле.

Мой друг и коллега Алекс Доусон написал отличную статью «Анатомия веб-сайта», в которой подробно описывается структура базового веб-сайта. Он использует хитроумную метафору - структуру человеческого тела - чтобы дать полное и хорошо продуманное исследование структуры сайта. Определенно стоит прочитать.

Выбор макета

Веб-дизайнер Кайла Найт дает нам некоторые параметры, которые необходимо учитывать перед выбором конкретного макета.Она пишет:

При разработке макета веб-сайта для большой аудитории дизайнер должен учитывать следующие возможные различия между посетителями:

• Разрешение экрана,
• Выбор браузера,
• Независимо от того, развернут ли браузер,
• В браузере открываются дополнительные панели инструментов (История, Закладки и т. Д.),
• Даже операционная система и железо.

Звучит достаточно просто, но если вы пишете код для широкой аудитории, вы не получите конкретных ответов ни на , ни на из этих ситуаций.Разрешение экрана будет широко варьироваться, у пользователей будут все браузеры, известные человеку, некоторые будут настаивать на просмотре с развернутым окном, в то время как другие будут работать с меньшим дисплеем, некоторые будут загружать свой браузер множеством дополнительных панелей инструментов и виджетов, а пользователи будут запускать Windows , Mac, Linux, BeOS, что угодно, у кого-то будет. Вы должны попытаться закодировать для все … в пределах разумного.

Невозможно сказать, какой макет «всегда» правильный. Разные потребности подтолкнут дизайнера к разным макетам.

Если вам нужен вводный видеоролик по теме, посмотрите скринкаст Криса Койера о фиксированных, плавных и эластичных макетах.

Макеты фиксированной ширины

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

Еще около единиц измерения размера .

Вы также можете узнать больше об оптимальной ширине для мониторов разных размеров:

Подробнее о оптимальной ширине для разных размеров монитора .

Опытный веб-дизайнер Майк Черим объясняет, что такое фиксированный макет:

Сайт с фиксированной шириной - это сайт, где основная оболочка установлена ​​на определенную неподвижную ширину, независимо от разрешения дисплея пользовательского агента. Обычная и тщательно продуманная фиксированная ширина составляет 760 пикселей, размер, который гарантирует, что пользователи мониторов с разрешением 800 × 600 смогут просматривать почти весь экран без раздражающей боковой прокрутки.

Достаточно верно, за исключением того, что Черим написал эту страницу в 2007 году, и многие дизайнеры (не все!) Теперь отказались от ширины 760 пикселей в пользу 960 пикселей, чтобы разместить пользователей с мониторами с разрешением 1024x760 пикселей.

И помните, макет с фиксированной шириной может содержать элементы, основанные на процентах или em. Knight пишет:

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

Веб-разработчик Майкл Мидра отмечает, что многие дизайнеры предпочитают макет фиксированной ширины:

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

Он также отмечает «фактор комфорта» при преобразовании жестких табличных макетов в макеты CSS фиксированной ширины:

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

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

С другой стороны, мой коллега по SitePoint Ральф Мейсон отмечает:

Макеты с фиксированной шириной, основанные на пикселях, предсказуемы, но не очень адаптируемы к изменяющимся условиям браузера.

Подробнее о размерах дисплея .

Так что это не только вопрос предпочтений, но и функциональность. Иногда макет с фиксированной шириной решает больше проблем, чем создает; иногда нет.

У фиксированных макетов ширина определяется дизайнером.Мониторные дисплеи с областью просмотра меньше ширины получают горизонтальную полосу прокрутки, а часть сайта скрывается до тех пор, пока пользователь не прокрутит вправо. На мониторах с областью просмотра, превышающей ширину, сайт отображается либо в центре экрана (хороший дизайнер), либо слева (ленивый дизайнер), при этом оставшаяся часть области просмотра не занята сайтом. Обычно у пользователя появляются «полоски» белого цвета слева и справа от сайта.

Преимущества фиксированной планировки:

• Основная область содержимого строго контролируется без установки значений min-width и max-width в теле страниц, которые в любом случае правильно не поддерживаются всеми браузерами.
• Многие дизайнеры считают, что макеты с фиксированной шириной проще стилизовать; некоторые визуальные конструкции (например, изображения заголовков, охватывающие всю область заголовка) могут быть реализованы только в фиксированном дизайне.
• Основная область содержимого дизайна с фиксированной шириной обычно имеет хорошую ширину для удобства чтения.
• Поскольку ширина одинакова во всех браузерах (кроме небольших браузеров для телефонов), добавление изображений, форм, видео и другого содержимого с фиксированной шириной довольно просто.

Недостатки фиксированной компоновки:

• Когда пользователи увеличивают текст с помощью функции изменения размера текста своего браузера, идея «оптимальной читабельности» может исчезнуть из окна, поскольку отношение ширины строки к размеру текста не увеличивается вместе с текстом. Этого не произойдет, если пользователь не сделает текст очень большим.
• Пользователям не нравятся горизонтальные полосы прокрутки.
• Маленькие дисплеи фиксированной ширины могут выглядеть слишком узкими на больших экранах.
• В некоторых случаях узкая ширина может ограничивать количество столбцов и объем содержимого, доступного для отображения.

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

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

 body {
   выравнивание текста: центр; / * для IE * /
}

div # wrapper {
   выравнивание текста: слева; / * сбросить выравнивание текста * /
   ширина: 960 пикселей; / * или процент, или что угодно * /
   маржа: 0 авто; / * для других браузеров * /
} 

text-align: left гарантирует, что все внутри оболочки не выровнено по центру.

Лично я не использую макеты фиксированной ширины, но это только я. У многих дизайнеров больше отбивок, чем я клянусь фиксированными макетами. (Эм, Майкл, , этот сайт использует макет с фиксированной шириной. Я знаю, знаю.)

Если вам интересно посмотреть несколько примеров, CodeSucks.com предоставляет множество базовых шаблонов макетов с фиксированной шириной, которые вы можете можете на досуге изучить, как они работают. Веб-дизайнер Алессандро Фульчинити также предоставляет несколько десятков шаблонов, многие из которых имеют фиксированную ширину (или гибриды с фиксированной жидкостью).

Схемы жидкостей

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

Еще около единиц измерения размера .

Cherim определяет макет с изменяемой шириной:

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

Другими словами, макет с плавной шириной заполняет весь экран, будь то ширина 300 пикселей или ширина 3000 пикселей.

Мейсон пишет:

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

Некоторым дизайнерам нравится создавать «фиксированный / гибкий» макет, например макет из 3 столбцов с фиксированными левой и правой боковыми панелями и плавной центральной областью содержимого.

Преимущества жидкой компоновки:

• Это непросто сделать, но если все сделано правильно, гибкий макет может адаптироваться практически к любому размеру окна просмотра, что делает дизайн очень удобным для пользователя.
• Плавная ширина соответствует макету браузера по умолчанию, что делает его «чистым» макетом.Это не обязательно означает простоту использования.
Макеты
• Fluid используют преимущества всего окна просмотра экрана, что упрощает размещение важного контента «над сгибом» (видимым без прокрутки).

Недостатки жидкой компоновки:

• Как отмечалось выше, использование гибких схем может быть довольно затруднительным. На больших дисплеях строки текста могут растягиваться на несколько миль, в то время как на меньших дисплеях макет может быть довольно перегруженным.Иногда блоки содержимого могут перекрываться или «накладываться» друг на друга. Часто пробелы либо недооценены, либо переоценены.
• Использование свойства CSS max-width не всегда ограничивает ширину сайта, особенно в - как вы уже догадались - IE6.
• Может быть непросто создать дизайн для больших изображений, видео и другого содержимого с фиксированной шириной.

Дизайн с гибким макетом работает лучше всего, когда дизайн прост и не загроможден большим количеством изображений, видео, форм и т. Д.И использование минимальной / максимальной ширины почти обязательно. Мой друг Пол О'Брайен предлагает отличный метод на основе JavaScript, который работает в IE6 и более современных браузерах. Дизайн-джедай Кэмерон Молл предлагает похожую технику.

Лично я использовал плавные макеты, основанные на процентном соотношении, но отказался от этого из-за оговорок, указанных выше.

Один из моих любимых дизайнеров макетов, Мэтью Джеймс Тейлор, предлагает несколько хитроумных гибких макетов. Веб-дизайнер Алессандро Фульчинити также предоставляет несколько десятков шаблонов, многие из которых имеют гибкую ширину (или гибриды с фиксированной жидкостью).

Ниндзя дизайна Расс Уикли написал в 2003 году основополагающую статью о проектировании жидких макетов.

Knight дает нам захватывающий взгляд на новый «адаптивный» подход к плавным макетам.

Упругие макеты

Как и выше, чтобы понять эластичные макеты, вы должны знать, что макеты записаны в em-измерениях.

Еще около единиц измерения размера .

И я снова позволю Чериму дать определение:

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

Ems используются как с размерами шрифта, так и размерами макета.

Мейсон пишет:

Дизайн на основе ЭМ - особенно в сочетании с некоторыми плавными элементами - в некотором смысле объединяет оба лучших мира…

Дизайнеры почти всегда устанавливают «базовый размер» для своих шрифтов:

 body {
   размер шрифта: 16 пикселей;
} 

Подробнее о шрифтах и ​​типографике .

После того, как вы установили это, вы сказали браузеру, что 16px = 1em. Теперь ты готовишь.

В примере Мэйсона он устанавливает оболочку (идентификатор, который содержит весь сайт) следующим образом:

 #wrapper {
   ширина: 46em;
   маржа: 0 авто;
   максимальная ширина: 94%;
} 

Теперь сайт имеет ширину 46 em (736 пикселей, для тех, у кого есть калькуляторы), центрирован и установлен на максимальную ширину 94%. Возможно, немного узкий, так что вы можете достать свой собственный калькулятор, или счеты, или записную бумагу, или что-то еще, и определить ширину, которая вам подходит.Заметки каменщика:

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

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

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

Многие дизайнеры рассматривают макеты с эластичной шириной как «золотую середину» между жестким фиксированным макетом и потенциально растягивающимся плавным макетом. Другие, такие как Черим, не видят в этом смысла - почему бы не выбрать то или иное?

Нравится Чериму эластичные макеты или нет, он создал эластичный макет Zen Garden на CSS, которым очень гордится. Попробуйте изменить его размер и посмотрите, что произойдет. У Мэйсона также есть несколько интересных примеров для его статьи.

Преимущества эластичной раскладки:

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

Недостатки эластичной раскладки:

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

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

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

Дизайнер Мэтью Джеймс Тейлор (Matthew James Taylor) предоставил нам несколько эластичных макетов, закодированных как пикселями (!), Так и em. Я адаптировал несколько макетов Мэтью для своих целей.

Дизайнер и гуру кода Патрик Гриффитс подробно рассматривает плюсы и минусы эластичного дизайна, хотя обычно он приводит доводы в пользу эластичных макетов.

Гибридные макеты

«Гибрид» сочетают в себе фиксированные и подвижные элементы макета.Обычно такие конструкции с «фиксированной жидкостью» имеют одну или две боковые колонны фиксированной ширины и жидкостную центральную или главную колонну. Это позволяет боковым панелям всегда отображаться с определенным размером, в то время как размер центрального или основного столбца изменяется в соответствии с размером браузера. Как отмечалось выше, веб-дизайнер Алессандро Фульчинити предоставляет несколько десятков шаблонов, многие из которых представляют собой гибриды с фиксированной жидкостью.

Мобильные макеты

По мере того, как я узнаю больше о создании макетов для мобильных устройств (карманных компьютеров, КПК, iPhone, iPad, сотовых телефонов и т. П.), Я буду развивать этот раздел дальше.А сейчас позвольте мне рекомендовать вам серию из трех статей гуру веб-дизайна Кэмерона Молла под названием «Мобильный веб-дизайн». Это очень хорошее начало, а также статья «Адаптивный веб-дизайн», которая не касается непосредственно программирования для мобильных браузеров, но описывает полезные методы, которые мы можем использовать в наших мобильных макетах. (Предупреждение: это не для новичков.) Другие ресурсы включают в себя книгу автора SitePoint Брайана Суда «Проектирование для мобильного Интернета» и Джеффа Старра «5-минутный CSS-преобразование для мобильных устройств».

Примечание. Казалось бы очевидным, что первое, что вы должны сделать, чтобы сделать сайт удобным для мобильных, - это создать мобильную таблицу стилей и использовать атрибут HTML media = "handheld" для этой таблицы стилей.Если бы это было так просто. Тип носителя «портативный» не очень хорошо распознается, и многие браузеры не справляются с ним должным образом.

Примечание. Многие владельцы сайтов хотят, чтобы их мобильный сайт имел домен верхнего уровня .mobi, например www.example.mobi:

Подробнее о доменах .

Хотя это, безусловно, желательно, но если вы не хотите тратить деньги на домен ".mobi", вы можете добиться почти того же эффекта, используя гораздо более дешевый поддомен, например m.example.com. Это стало очень распространенным веб-соглашением, и его можно легко узнать как мобильный сайт.

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

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

Подробнее о позиционирование .

Некоторые дизайнеры склонны тяготеть к абсолютному позиционированию из-за очевидного контроля над страницей, позиционируя все по пикселям.Однако в некотором смысле абсолютное позиционирование сводит на нет одно из фундаментальных доводов, лежащих в основе веб-страницы: гибкость, которую оно дает пользователю в том, как ее просматривать.

Ваш абсолютно позиционированный макет может идеально выглядеть на экране размером 1024x768 или 1280x1024, который вы используете на своем компьютере:

Подробнее о размерах дисплея .

, но если пользователь резко изменит его размер или откроет его на дисплее необычного размера (например, на мобильном телефоне или ноутбуке).скорее всего, он не будет отображаться так, как вы его разработали. Абсолютно позиционированные элементы не будут плотно прижаться друг к другу, но будут бороться за пространство для отображения, и один или несколько элементов проиграют. Так будет и пользователь.

Ян Ллойд пишет:

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

Отказ от табличных макетов

Когда я начал возиться с веб-дизайном в 1998 году (строго в качестве хобби - я начал серьезно относиться к веб-дизайну примерно с 2008 года), каждый макет страницы не был просто «составным содержимым» (единым полным - столбец страницы с одним элементом, «уложенным» один поверх другого, как блины) был разработан с таблицами .

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

Подробнее о HTML таблицах .

Только с 2007 года или около того был достигнут некоторый консенсус: макеты на основе CSS (без таблиц) - лучшая практика, а использование таблиц для создания макетов страниц просто неправильно.

В 2005 году, когда бушевали споры между CSS и макетами, управляемыми таблицами, веб-дизайнер Джон Хеншоу объяснил:

Таблицы никогда не предназначались создателями HTML для управления визуальным стилем веб-страницы.Они были предназначены только для отображения данных в виде столбцов и строк. Не существовало механизма для удовлетворения потребностей в более сложных макетах, поэтому некоторые изобретательные веб-дизайнеры обнаружили, что они могут использовать таблицы для реализации надежных макетов. С тех пор веб-дизайнеры регулярно злоупотребляли языком HTML, в основном по необходимости.

В 2008 году учебный сайт Learn Web Design Online написал:

Сейчас, в 2008 году, эта дискуссия представляет скорее исторический интерес, поскольку очевидно, что веб-индустрия пошла в направлении безтабличного дизайна на основе CSS.Об этом свидетельствует то, что в последние годы многие крупные веб-сайты провели редизайн всего сайта, чтобы перекодировать свои макеты, основанные на таблицах, на макеты без таблиц. Если вы возьмете книги по HTML / CSS, опубликованные в 2007 и 2008 годах, вы обнаружите, что они будут учить вас именно безтабличному дизайну на основе CSS.

На том же сайте на странице, озаглавленной «Преимущества использования макетов без таблиц на основе CSS», приводится ряд причин, по которым макеты на основе CSS превосходят устаревшие макеты на основе таблиц. Три года назад Хеншоу сделал многие из тех же наблюдений; Веб-дизайнер Кэмерон Олтиус писал на ту же тему в 2006 году.Подводя итог их аргументам, можно сказать, что макеты на основе CSS ориентированы на стандарты; очиститель; намного легче поддерживать; более доступный для пользователей с ограниченными возможностями; поисковым системам проще каталогизировать; работать лучше; дать множество возможностей для творческого самовыражения; и семантически более точны.

Со своей стороны, сторонники табличных макетов утверждают, что таблицы гораздо более интуитивно понятны и проще для понимания, чем макеты CSS; Макеты CSS подвержены ряду «ошибок», жертвами которых не становятся таблицы; и имеют некоторые преимущества, такие как одинаковая высота столбцов, которых нет в макетах CSS без "хитростей" или обходных путей.

Henshaw заключил в 2005 г .:

Главный аргумент в пользу использования таблиц сегодня - плохие привычки и самоуспокоенность. Часто говорят, что использовать таблицы проще и браузеры не поддерживают это. В некоторых случаях это, конечно, может быть проще, но браузеры поддерживают это. Дизайн для Internet Explorer может быть неприятным, потому что он не очень хорошо соответствует веб-стандартам, но есть много исправлений и обходных путей, которые позволят правильно отображать макеты на основе CSS.Если когда-нибудь и было время начать разрабатывать макеты без таблиц, то это сейчас.

Хеншоу написал свою статью за несколько месяцев до выхода Internet Explorer 7. Несмотря на все недостатки и причуды этого браузера, он поддерживает макеты на основе CSS намного лучше, чем его привередливый предшественник IE6.

Говоря прямо, Olthius писал:

Я считаю, что если вы профессиональный веб-дизайнер (другими словами, вы обмениваете деньги на свои услуги), то вам следует создавать сайты строго с помощью CSS.

На мой взгляд, Olthius на высоте. Я не могу представить себе кого-нибудь, профессионала или любителя, который утверждал бы, что придерживается чего-либо, приближающегося к современным методам проектирования, отстаивая что-либо, кроме безтабличного дизайна макета на основе CSS.

Так зачем тратить столько времени и ресурсов на эту тему? Поскольку тема еще обсуждается, и веб-дизайнеров, которые должны лучше знать, упрямо продолжал выступать за столом управляемых веб-дизайна. Вы встретите знающих людей, которые решительно выступают за использование таблиц для веб-макетов.Я ценю их решимость и страсть, но они просто ошибаются. Если вы собираетесь разрабатывать дизайн в соответствии с передовыми практиками, то для обработки макетов вы разрабатываете с помощью CSS.

В интересах полноты я должен упомянуть об усилиях, предпринятых некоторыми из лучших умов в SitePoint и других проектных организациях, по использованию «таблиц CSS» для создания макетов. Основатель SitePoint Кевин Янк написал об этом в 2008 году, а SitePoint опубликовал скандальную книгу «Все, что вы знаете о CSS, неправильно! в соавторстве с Янком и гуру веб-дизайна Рэйчел Эндрю, решительно выступающей за использование таблиц CSS для компоновки страниц.К сожалению, поскольку IE7 и более ранние версии этого браузера вообще не поддерживают таблицы CSS, невозможно использовать такие методы для разработки страниц для чего-либо, подходящего для широкой аудитории. IE6 существует с 2001 года, и почти все дизайнеры должны создавать свои страницы с учетом этого браузера. Кто знает, сколько времени потребуется IE7, чтобы запустить свой курс и исчезнуть? А пока изучение того, как программировать с помощью таблиц CSS, будет не более чем академическим упражнением. (В свете новых методов компоновки, которые, как нам сказали, будут включены в CSS3, когда он будет выпущен и когда браузеры начнут его поддерживать, мы никогда не сможем использовать таблицы CSS для создания макетов.)

методов макета CSS

Вернуться на страницу Класс 9 »

Есть несколько основных методов, которые можно использовать в вашем CSS для создания макетов с несколькими столбцами. Далее следует демонстрация необходимых методов работы с barebone-системами.

Вы должны проконсультироваться с ними при работе над финальными проектами.

Демо-ссылки

Макеты с двумя столбцами

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

Основной код CSS для двухколоночной компоновки по центру с CSS слева выглядит следующим образом.

  кузов {
 выравнивание текста: центр;
}

#container {
  маржа: 0 авто;
  выравнивание текста: слева;
  ширина: 960 пикселей;
}

#header {
  ширина: 960 пикселей;
}

#navigation li {
  дисплей: встроенный;
}

#содержание {
  float: right;
  ширина: 700 пикселей;
}

#sidebar {
  плыть налево;
  ширина: 260 пикселей;
}

#footer {
  ясно: оба;
  ширина: 960 пикселей;
}  

Вот ключевые моменты, которые следует учитывать при выборе этого макета:

• Верхний и нижний колонтитулы имеют размер 960 пикселей, поэтому они растягиваются по всей ширине.
• Ширина содержимого и боковой панели задана. В сумме получается 960 пикселей.
• Боковая панель перемещается слева, а содержимое - справа.
• Нижний колонтитул настроен на очистку плавающих элементов с обеих сторон, так что он находится под содержимым и боковой панелью.

Демонстрационные материалы с двумя колонками

Двухколоночный макет с боковой панелью слева

Двухколоночный макет с боковой панелью справа

Единственная разница здесь - в плавающих точках в CSS. Мы говорим, что контент перемещается влево, а боковая панель - вправо.

Трехколонный макет

Трехколоночный макет обычно состоит из области основного содержимого в середине и боковой панели с правой и левой стороны.

Ниже приведен базовый код CSS для макета из 3 столбцов.

  кузов {
  выравнивание текста: центр;
}

#container {
  маржа: 0 авто;
  выравнивание текста: слева;
  ширина: 960 пикселей;
}

#header {
  ширина: 960 пикселей;
}

#navigation li {
  дисплей: встроенный;
}

#содержание {
  плыть налево;
  ширина: 560 пикселей;
}

# sidebar-left {
  плыть налево;
  ширина: 200 пикселей;
}

# sidebar-right {
  float: right;
  ширина: 200 пикселей;
}

#footer {
  ясно: оба;
  ширина: 960 пикселей;
}  

Трехколоночная демонстрация

Трехколоночный макет с боковой панелью справа и слева

Трехколонная несимметричная компоновка

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

Ниже приведен базовый код CSS для несбалансированного макета из 3 столбцов.

  кузов {
  выравнивание текста: центр;
}

#container {
  маржа: 0 авто;
  выравнивание текста: слева;
  ширина: 960 пикселей;
}

#header {
  ширина: 960 пикселей;
}

#navigation li {
  дисплей: встроенный;
}

#содержание {
  плыть налево;
  ширина: 560 пикселей;
}

# sidebar-one {
  плыть налево;
  ширина: 200 пикселей;
}

# sidebar-two {
  плыть налево;
  ширина: 200 пикселей;
}

#footer {
  ясно: оба;
  ширина: 960 пикселей;
}  

Трехколоночная демонстрация

Трехколоночный макет с боковой панелью справа и слева

Двухколонный растягиваемый макет

За неимением лучшего термина я называю этот тип макета «растянутым» макетом.В основном этот тип макета по-прежнему центрирован и имеет определенную ширину, но фон каждого раздела растягивается до края страницы.

Ниже приведен базовый код CSS для двухколоночного растягиваемого макета.

  кузов {
  выравнивание текста: центр;
}

.centerLayout {
  маржа: 0 авто;
  выравнивание текста: слева;
  ширина: 960 пикселей;
}

#navigation li {
  плыть налево;
}

#содержание {
  плыть налево;
  ширина: 700 пикселей;
}

#sidebar {
  плыть налево;
  ширина: 260 пикселей;
}

#footer {
  ясно: оба;
}  

Вот ключевые моменты, которые следует учитывать при выборе этого макета:

• Раньше мы все оборачивали контейнером и центрировали этот контейнер.
• На этот раз мы оставляем основные элементы (верхний колонтитул, навигацию, нижний колонтитул) снаружи и не объявляем их ширину. Это означает, что они растягиваются по ширине страницы.
• Сразу же внутри каждого из этих основных div мы добавляем новый div с классом centerLayout.
• Мы используем этот класс для центрирования внутренних частей обычным способом.

Демонстрация растяжения в 2 колонны

Вернуться на страницу класса 9 »

DIV | Дизайн веб-сайта с использованием тега Div, Div против макета таблицы

Чтобы Дизайн веб-сайта или веб-страницы, нам необходимы базовые знания HTML и CSS.HTML вместе с CSS может создать веб-страницу ( в HTML5 ). До XHTML / HTML4 таблицы html использовались для разработки веб-страниц, которые сложно поддерживать и которые сложны по структуре. Также макеты на основе таблиц медленные.

Таблица против макета Div

CSS Layout с использованием Div

Тег

<стиль>
* {
    маржа: 0;
}
.сворачивать{
ширина: 1200 пикселей;
фон: #ddd;
}



    

        Это обертка полного макета.


  

 





<стиль>
* {
маржа: 0;
}
.сворачивать{
ширина: 1200 пикселей;
маржа: авто;
фон: #ddd;
}
.header {
высота: 150 пикселей;
фон: # 333;
}



    

        
 
    

 





<стиль>
* {
маржа: 0;
}
.сворачивать{
ширина: 1200 пикселей;
маржа: авто;
}
.header {
высота: 150 пикселей;
фон: # 333;
}
.nav {
высота: 50 пикселей;
фон: # 000;
}




 
 

Установка контейнера

Это заголовок

Это панель навигации

 





<стиль>
* {
маржа: 0;
}
.сворачивать{
ширина: 1200 пикселей;
маржа: авто;
фон: #ddd;
}
.header {
высота: 150 пикселей;
фон: # 333;
}
.nav {
высота: 50 пикселей;
фон: # 000;
}
.контейнер{
высота: 768 пикселей;
фон: #ccc;
}