Сайт

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

14.04.2021

Содержание

Резиновая ширина, навигация слева | htmlbook.ru

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

Рис. 1. Макет с резиновой шириной

Создание двух колонок происходит с помощью стилевого свойства float со значением left, которое применяется для левой колонки. При этом одновременно следует установить отступ слева для правой колонки через margin-left, значение которого равно ширине левой колонки плюс расстояние между ними (пример 1).

Пример 1. Создание двух колонок

#leftcol { /* Левая колонка */
  float: left; /* Обтекание справа */
  width: 20%; /* Ширина колонки */
}
#rightcol { /* Правая колонка */
  margin-left: 24%; /* Отступ слева */
}

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

Окончательный вариант создания макета приведен в примере 2.

Пример 2. Макет с двумя колонками

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Байки из склепа</title>
  <style>
   body {
    font: 11pt Arial, Helvetica, sans-serif; /* Рубленый шрифт текста */
    margin: 0; /* Отступы на странице */
   }
   h2 {
    font-size: 36px; /* Размер шрифта */
    margin: 0; /* Убираем отступы */
    color: #fc6; /* Цвет текста */
   }
   h3 {
    margin-top: 0; /* Убираем отступ сверху */
   }
   #header { /* Верхний блок */
    background: #0080c0; /* Цвет фона */
    padding: 10px; /* Поля вокруг текста */
   }
   #sidebar { /* Левая колонка */
    float: left; /* Обтекание справа */
    border: 1px solid #333; /* Параметры рамки вокруг */
    width: 20%; /* Ширина колонки */
    padding: 5px; /* Поля вокруг текста */
    margin: 10px 10px 20px 5px; /* Значения отступов */
   }
   #content { /* Правая колонка */
    margin: 10px 5px 20px 25%; /* Значения отступов */
    padding: 5px; /* Поля вокруг текста */
    border: 1px solid #333; /* Параметры рамки */
   }
   #footer { /* Нижний блок */
    background: #333; /* Цвет фона */
    padding: 5px; /* Поля вокруг текста */
    color: #fff; /* Цвет текста */
    clear: left; /* Отменяем действие float */
   }
  </style>
 </head>
 <body>
  <div><h2>Байки из склепа</h2></div>
  <div>
    <p><a href="b_all.html">Все байки</a></p>
    <p><a href="b_author.html">Байки по автору</a></p>
    <p><a href="b_theme.html">Байки по теме</a></p>
    <p><a href="b_popular.html">Популярные байки</a></p>
    <p><a href="b_last.html">Последние байки</a></p>
  </div>
  <div>
    <h3>Алтарь демона </h3>
    <p>Утром, при ярком солнечном свете, всё выглядело совсем не так и мрачно, как 
       планировалось, а даже наоборот. От свечей остались одни потёки, «кровь» 
       смотрелась как краска, а перья почти целиком разлетелись от ветра. Хорошо 
       сохранились только рисунки мелом, но и они были скорее прикольные, чем злые и загадочные. 
       Дети с неподдельным интересом разглядывали изображения, но без тени тех чувств, которые 
       испытали взрослые ночью при луне.</p>
    <p>Тем не менее, оказался один человек, на которого работа произвела большое 
       впечатление, — сторож лагеря. Днём он подошёл к автору «алтаря».</p>
    <p>— Ваша работа? - начал сторож, кивая в сторону площади.<br />
       — А что такое? <br />
       — Ну, как же... Тут кровь..., перья птицы мёртвой..., знаки какие-то страшные нарисованы..., 
       а у вас всё же дети маленькие, они испугаться могут...</p>
  </div>
  <div>&copy; Влад Мержевич</div>
 </body>
</html>

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

Свойство clear для слоя footer понадобится в том случае, когда высота меню выше высоты контента, чтобы слои не накладывались друг на друга.

6500+ бесплатных HTML-шаблонов. HTML5 и HTML шаблоны веб-сайтов

Популярность HTML-шаблоны

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

Шаблоны и лицензия Creative Commons

Чтобы запустить любой веб-сайт с помощью шаблона HTML, вам понадобится бесплатный или платный контент. Некоторые фотоматериалы могут иметь проблемы с конфиденциальностью, и вам следует изучить это, прежде чем использовать их в HTML шаблоне страницы или в темах WordPress. Современные веб-технологии, используемые в веб-шаблонах, в том числе HTML, CSS, JavaScript и bootstrap, позволяют преобразовать базовую HTML-страницу в расширенную систему веб-сайтов электронной коммерции, которую может использовать бизнес-компания любой отрасли. Даже простые аспекты использования, такие как персональная галерея портфолио, или одностраничные обновления, блог и события, например, для магазина одежды, позволяющие использовать образцы шаблонов адаптивного дизайна HTML для ускорения разработки и стимулирования прогресса творческого дизайна. Вы можете использовать наши бесплатные HTML-шаблоны в качестве быстрого создания шаблонов электронной почты, подходящих для HTML-писем, или макета веб-сайта и HTML-страницы на основе шаблонов начальной загрузки.

HTML-шаблоны сайтов

Шаблоны сайтов, обычно предоставляемые в виде HTML-шаблонов CSS, идеально подходят для различных тем, например для шаблонов агентства недвижимости и бесплатного портфолио HTML-страниц креативного агентства. Это также может быть шаблон веб-сайта о еде, моде, социальных сетях или шаблон консультационного веб-сайта. Вы можете добавлять фотографии и другой контент, а также бесплатную графику, необходимую для создания адаптивных шаблонов html5, отражающих последние цифровые тенденции. Это нормально — получить шаблоны бесплатно и использовать их в качестве шаблона сайта или веб-страницы, используемой в качестве шаблона целевой страницы. Некоторые загруженные шаблоны целевой страницы HTML в качестве образцов, содержащие фотографии, можно использовать для шаблона портфолио. А если вы добавите информацию о продукте, вы сможете создать шаблон магазина, домашнюю страницу программного обеспечения и идеальный дизайн шаблона.

Адаптивные веб-сайты

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

Другое использование шаблонов

Чего вы также можете ожидать, посетив службу загрузки шаблонов для веб-образцов html? Вы также можете получить шаблоны WordPress, поскольку бесплатные темы WordPress обычно предлагаются вместе с шаблоном HTML-страницы. Вы можете поделиться своим адаптивным HTML-шаблоном, если хотите. Новые темы всегда востребованы в крупных обучающих и стартап-сообществах и на форумах. Компании предпочитают свежие проекты, которые они могут получить из ресурсов загрузки шаблонов HTML. И для некоторых конкретных целей, таких как, например, шаблоны администратора, простые шаблоны HTML имеют большой интерес и маркетинговую ценность. Сегодня многие участники предоставляют адаптивные шаблоны сайтов, надеясь получить взамен обратную связь, которая им небезразлична и ценится, поскольку для многих это может стать хорошим началом или изменением в их работе и карьере.

Адаптация html-шаблона

Рассмотрим, как самостоятельно можно внедрить html-вёрстку на сайт под управлением CMS NetCat. Вам подойдёт любой чистый html-шаблон, который вы можете найти! (разумеется, в том случае, если вы используете шаблон, уже адаптированный для других CMS, вам придётся сначала очистить его от специальных функций, переменных и т. д.)

 

Таким образом всё, что вам нужно сделать — заказать у дизайнера макет, у верстальщика — шаблон и далее заняться внедрением шаблона на сайт. Также вы можете воспользоваться уже готовым html-шаблоном. В этом случае, при поиске, именно такой запрос вам нужно писать в поисковой системе («html-шаблоны», «html-templates» и т.д.). Этим способом воспользуемся и мы.

 

Для написания данного урока и продолжения построение нашего сайта на CMS NetCat, нами был выбран бесплатный html-шаблон под названием «Shop Around».

 

Наш шаблон выглядит следующим образом:

 


Рис.1 — Внедряемый html-шаблон

 

Данный шаблон легко может быть использован для небольшого интернет-магазина.

 

Сейчас давайте ненадолго перейдём в административный раздел NetCat и посмотрим, где должен находиться шаблон нашего сайта. На сайте под управлением NetCat вы можете использовать любое количество макетов (шаблонов). Мы будем использовать только один шаблон. Итак, управление макетами находится в разделе «Разработка: Макеты дизайна»:

 


Рис.2 — Раздел с существующими макетами

 

Как вы видите, у нас уже существует «Стандартный макет», но мы создадим новый.

 

Для создания нового макета необходимо нажать на пиктограмму с зелёным крестиком: у соответствующего раздела-родителя. Заметим, что у макетов, как и у разделов, так же существует иерархия и вложенность. Мы же в данном случае выбираем самый верхний пункт «Макеты дизайна»:

 


Рис.4 — Родительский пункт

 

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

 


Рис.5 — Окно для управления макетом

 

Структурированно наш макет должен делиться на:

  1. Хедер (шапка). Верхняя часть сайтас логотипом, навигацией и т. п.
  2. Контентная часть. Всё содержимое нашего сайта
  3. Футер (подвал). Нижняя часть сайта со счётчиками, копирайтами и т. д.

Теперь давайте посмотрим на то, какие поля присутствуют в макете дизайна:

  1. Название макета. Название используется только для разработчика и визуально на самом сайе никак не отображается.
  2. Шаблоны вывода навигации. Данное поле содержит массивы, используемые при построении меню, путь по сайту («хлебные крошки») и т. п. Поле так же позволяет добавлять некоторый php или js скрипт, который может участвовать в составлении макета.
  3. Верхняя часть страницы (Header). Собственно, название говорит само за себя. В данное поле помещается всё то, что должно отображаться в хедере вашего сайта.
  4. Нижняя часть страницы (Footer). В данное поле помещается всё то, что будет отображаться в подвале вашего сайта.
  5. Настройки отображения макета дизайна в разделе. Данные настройки содержат массивы задаваемых разработчиком переменных/полей, которые задаются один раз, и далее в них просто прописываются необходимые значения. Пример того, как выглядят подобные настройки мы рассматривали при настройке компонента «Обратная связь» в визуальных настройках.
  6. Дополнительные поля. По-умолчанию добавлено только одно поле «Таблица стилей», но вы можете добавить свои поля по необходимости,  перейдя в раздел «Разработка: Системные таблицы: Макеты дизайна». Свои поля вы сможете использовать в макете дизайна. Использование существующего поля (CSS) в качестве хранения стилей возможно, но не желательно. Дело в том, что значения, которые будут сюда записаны, попадут прямиком в исходный код шаблона, что увеличит размер страницы. Всё же рекомендуется выносить все CSS стили в отдельный файл.

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

 


Рис.6 — Шаблон с разделёнными осставляющими

 

Для удобства, нами были выделены цветом 4 зоны для внедрения в макет. Давайте рассмотрим их начиная с верхнего:

  1. Зелёным цветом выделено то, что пойдёт в хедер. Сюда будут включены: логотип, главное меню, корзина товаров, форма поиска и список категорий. Сразу поясню, почему блоки из боковой панели так же идут в хедер. Дело в том, что нам нужно найти такую область, которая будет повторяться на всех или на большинстве страниц. В данном случае, все элементы боковой панели как раз-таки будут выводиться на всех страницах нашего сайта.
  2. Красным цветом обозначена панель с товарами. В нашем случае, это будет список последних товаров. Данную панель считаю нужным выводить только на главной странице.
  3. Жёлтым цветом обозначен футер нашего сайта, а именно вся нижняя часть.
  4. Невыделенная часть в центре является контентной областью и будет изменяться в зависимость от нашего содержимого.

Теперь переходим к файлам нашего шаблона и начинаем подготовку к его внедрению. В папке с шаблоном будут находиться все необходимые нам файлы.

 


Рис.7 — Файлы шаблона

 

Папка с изображениями скачанного нами шаблона находится внутри папки стилей. Исправляю эту неточность и переношу её в корень шаблона. Теперь наша папка с файлами выглядит как и нужно:

 


Рис.8 — Файлы шаблона

 

Нам будет необходимо отредактировать два файла: index.html и style.css. Открывайте их в текстовом редакторе.

Все пути в файлах советуем сделать относительными.

 


Рис.9 — Замена путей к файлам

 

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

 

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

 


Рис.10 — Редактирование файла со стилями

 

Теперь нам необходимо в файл index.html внедрить специальные переменные, функции и команды. Воспользуемся стандартным шаблоном и скопируем оттуда всё, что нам необходимо.

 

Первое, что нужно сделать — вставить необходимые переменные в тегах head. Вы можете воспользоваться нижеприведёнными кодами и скопировать их себе на сайт:


<title><?=strip_tags($f_browse_path=s_browse_path($browse_path))?></title>
<meta name='description' content='<?=$current_sub[Description]?>' />
<meta name='keywords' content='<?=$current_sub[Keywords]?>' />
<meta http-equiv='Content-type' content='text/html; charset=<?=$nc_core->NC_CHARSET?>' />

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

 


Рис.11 — Добавление комментариев

 

В это место мы вставляем функцию NetCat и заключаем контентную часть в комментарии:

 


<!-- content --> <!-- /content --> 


 

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

Так же вы можете скопировать папки «css», «images» и «js» в корневой каталог вашего сайта. Для того, чтобы установить добавленный вами макет дизайна, нужно в настройках сайта назначить его основным:

 


Рис.12 — Установка макета дизайна

 

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

 


Рис.13 — Тестирование макета дизайна

 

Узнать номер макета дизайна вы можете в администраивном разделе:

 


Рис.16 — Номер макета дизайна

 

Теперь остаётся добавить материалы на титульную страницу и далее приступать к настройке меню, к созданию разделов и т. д. Для титульной страницы мы создадим отдельный макет дизайна и скопируем в него оставшуюся часть нашего html-шаблона. Учтите, что все остальные макеты, которые вы будете создавать для одного сайта, желательно делать дочерними родительскому макету:

 


Рис.17 — Добавление дочернего макета

 

Называем новый макет «Титульная страница». Так как мы создали макет для титульной страницы дочерним от основного, то он может наследовать значения полей футера, хедера и шаблонов вывода навигации. Для того, чтобы данные из основного макета отображались также на титульной странице, существуют макропеременные %Header и %Footer, которые заменяют копирование кода. То есть вставка макропеременной %Header в соответствующее поле будет равна всему тому коду, который вы добавили в родительском макете дизайна.

 

Таким образом, в верхнюю часть страницы нам нужно вставить макропеременную %Header и всё то, что осталось в нашем html-шаблоне. В нижнюю часть страницы мы вставляем ТОЛЬКО макропеременную %Footer.

 


Рис.18 — Коды титульной страницы

 

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

 


Рис.19 — Новый макет дизайна

 

Последнее что нам остаётся — выбрать только что созданный нами макет дизайна для раздела титульной страницы в карте сайта.

 


Рис.20 — Выбор макета дизайна для титульной страницы

 

Теперь мы можем зайти на сайт и увидеть, что html-шаблон полностью перенесён, то есть адаптирован под CMS NetCat.

Верстаем фиксированный макет сайта. | Веб-мастерская Ларисы Ворониной


Фиксированный макет сайта – это макет с определённой фиксированной шириной. Все колонки и блоки тоже имеют фиксированные размеры, независимо от разрешения экрана.

Будем верстать вот такой макет:

В редакторе создаём новый документ index.html (синтаксис html), и пишем разметку нашего макета .

<!DOCTYPE html>
<html>
     <head>
          <meta charset=»utf-8″>
          <link rel=»stylesheet» type=»text/css» href=»style.css» />
          <title>Фиксированный макет</title>
     </head>
     <body>
          <div>
               <div>
                    <h2>Шапка сайта</h2>
               </div>
               <div>
                    <h3>Главное меню</h3>
               </div>
              <div>
                   <h3>Сайдбар</h3>
              </div>
              <div>
                   <h3>Контент</h3>
              </div>
              <div>
                   <h3>Подвал</h3>
               </div>
          </div>
     </body>
</html>

Обратите внимание, что весь макет сайта обёрнут в div с классом wrapper. Этот слой является как бы подложкой для макета сайта, и на фоне этой подложки будут располагаться:

— Шапка сайта (div с классом head),

— Главное меню сайта (div с классом menu),

— Сайдбар (div с классом sidebar),

— Контент (div с классом content),

— подвал (div с классом footer).

Если мы откроем index.html в браузере, то увидим вот это:

Ну а теперь пишем стили, т.е. приводим разметку к нужному нам виду.

В редакторе создаём новый файл style.css (синтаксис css), и начинаем ваять.

Пишем стили для класса wrapper.

  • Определяем цвет и ширину подложки для сайта.

.wrapper {
background: #85C8E1;
width: 1000px;
}

  • Располагаем макет сайта  по центру.

margin: 0 auto;
overflow: hidden;

Пишем стили для шапки (для класса head).

  • Размещаем блок div с классом head по центру.

.head {
margin: 0 auto;
overflow: hidden;

  • Задаём фоновый цвет.

background: #242A64;

  • Делаем отступ сверху.

margin-top: 20px;

  • Задаём отступы для текста.

padding: 20px;

  • Определяем высоту и ширину блока.

width: 920px;
height: 130px;

Как мы вычислили ширину и высоту? Очень просто, давайте рассуждать:

Ширина всего макета 1000 px.

Ширина шапки у нас должна быть меньше на 20px справа и на 20px слева, т.е. 1000 – 40 = 960px.

Паддинги у нас по 20px с каждой стороны, следовательно 960 – 40 = 920px.

Таким же образом вычисляется и высота шапки. Если мы хотим сделать высоту шапки 170px, то из 170 вычитаем опять же наши паддинги по 20px снизу и сверху. У нас получается 170 – 40 = 130px.

  • Закругляем углы.

border-radius: 7px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;

  • Определяем цвет для текста и выравниваем его по середине блока.

color: #fff;
text-align: center;

Пишем стили для блока меню.

Подробно я здесь расписывать уже не буду, я думаю и так всё понятно. Единственное скажу, что паддинги иногда приходится подгонять.

.menu {
margin: 0 auto;
overflow: hidden;
margin-top: 20px;
background: #242A64;
padding: 0 20px 40px 20px;
width: 920px;
height: 30px;
border-radius: 7px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
color: #fff;
text-align: left;
}

 Определяем стили для сайдбара.

Чтобы поместить сайдбар слева применяем свойство float со значением left.

.sidebar {
float:left;
background: #242A64;
width: 180px;
height: 660px;
margin: 20px;
padding: 20px;
border-radius: 7px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
color: #fff;
text-align: left;
}

Стили контента.

Контент будет располагаться справа от сайдбара, поэтому применяем свойство float со значением right.

.content {
float:right;
background: #242A64;
width: 680px;
height: 660px;
margin:20px 20px 20px 0;
padding: 20px;
border-radius: 7px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
color: #fff;
text-align: center;
}

Подвал (footer).

.footer {
margin: 0 auto;
overflow: hidden;
margin-top: 20px;
margin-bottom: 20px;
background: #242A64;
padding: 0 20px 40px 20px;
width: 920px;
height: 30px;
border-radius: 7px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
color: #fff;
text-align: center;
}

В итоге файл style.css должен выглядеть вот так:

.wrapper {
background: #85C8E1;
width: 1000px;
margin: 0 auto;
overflow: hidden;
}
.head {
margin: 0 auto;
overflow: hidden;
background: #242A64;
margin-top: 20px;
padding: 20px;
width: 920px;
height: 130px;
border-radius: 7px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
color: #fff;
text-align: center;
}
.menu {
margin: 0 auto;
overflow: hidden;
margin-top: 20px;
background: #242A64;
padding: 0 20px 40px 20px;
width: 920px;
height: 30px;
border-radius: 7px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
color: #fff;
text-align: left;
}
.sidebar {
float:left;
background: #242A64;
width: 180px;
height: 660px;
margin: 20px;
padding: 20px;
border-radius: 7px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
color: #fff;
text-align: left;
}
.content {
float:right;
background: #242A64;
width: 680px;
height: 660px;
margin:20px 20px 20px 0;
padding: 20px;
border-radius: 7px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
color: #fff;
text-align: center;
}
.footer {
margin: 0 auto;
overflow: hidden;
margin-top: 20px;
margin-bottom: 20px;
background: #242A64;
padding: 0 20px 40px 20px;
width: 920px;
height: 30px;
border-radius: 7px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
color: #fff;
text-align: center;
}

Проверить валидность CSS кода можно на этом сайте: https://jigsaw.w3.org/css-validator/.

Создание базового макета Angular на основе статичной html страницы – CODE BLOG

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

Начнем перенос шаблона сайта Bootstrap 4 на Angular. Используемый шаблон сайта можно найти в статье Базовый шаблон сайта Bootstrap 4.

Для начала подключим библиотеки bootstrap к проекту. Для этого скачиваем последнюю актуальную на данный момент версию 4.0.0-beta.2-dist с официального сайта Bootstrap.

Добавляем файлы bootstrap.min.css и bootstrap.bundle.min.js в папку библиотек Angular2\wwwroot\dist\

Add libs

Теперь для удобства дальнейшей настройки сайта необходимо зайти в свойства проекта.

Project properties

Выберем вкладку Ресурсы (Resources) и нажмем на ссылку создания нового файла ресурсов.

Add resouces

Теперь создадим набор свойств, которые будут подставляться в макет. Это необходимо для дальнейшего удобного поддержания работы сайта. Обратите внимание, что необходимо изменить модификатор доступа со значение Internal на Public в выпадающем списке.

Properties

Теперь изменим файл макета:

Angular2\Views\Shared\_Layout.cshtml

Приведем содержимое файла к следующему виду:

Layout

Теперь преступим к созданию компонентов Angular. Для начала выделим три самых крупных компонента:

Header (синий)
Content (оранжевый)
Footer (зеленый)
Select components

Подробнее о создании компонентов можно прочитать в статье Создание нового компонента Angular.

Итак, мы получаем три больших компонента. Создадим компоненты header и footer. Содержимое Content разместим на странице home.

Таким образом мы получаем следующую структуру приложения

App structure

header.component.html

header.component.html

header.component.ts

header.component.ts

header.component.css

header.component.ts

footer.component.html

footer.component.html

footer.component.ts

footer.component.ts

footer.component.css

footer.component.css

После этого не забываем регистрировать компоненты в app.shared.module.ts

app.shared.module.ts

Содержимое контента разместим в файле home.component.html

home.component.html

И наконец изменим файл app.component.html следующим образом

app.component.html

Запустим приложение чтобы проверить результат

result

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

Похожее

Отзывчивый дизайн — Изучение веб-разработки

На заре веб-дизайна страницы создавались для экрана определённого размера. Если у пользователя был экран большего или меньшего размера чем ожидал дизайнер, то результат мог быть от нежелательных полос прокрутки, до слишком длинной строки и плохого использования пространства. Поскольку становились доступны много различных размеров экранов, появилась концепция отзывчивого (адаптивного) веб-дизайна (responsive web design (RWD)) — набор методов, которые позволяют веб-страницам менять свой макет и внешний вид в соответствии с разной шириной экрана, разрешением и т.д. Это та самая, идея которая изменила подход к дизайну веба для множества устройств, и в этой статье мы поможем вам понять основные методы, которые вам необходимо знать, чтобы освоить его.

В какой-то момент истории при разработке веб-сайта у вас было два варианта:

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

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

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

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

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

Примечание: Скриншоты выше сделаны используя Responsive Design Mode в Firefox DevTools.

Когда мобильный веб стал становиться реальностью с первыми функциональными телефонами, компании желающие охватить мобильники начали создавать в основном специальные мобильные версии своих сайтов, с различными URL (часто что-то наподобие m.example.com или example.mobi). Это означало, что необходимо было разрабатывать и поддерживать в актуальном состоянии две отдельные версии сайта.

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

Было разработано несколько подходов чтобы попытаться разрешить недостатки построения веб-сайтов жидким методом или методом с фиксированной шириной. В 2004 году Камерон Адамс написал пост Resolution dependent layout, описывающий метод создания дизайна который мог бы адаптироваться к разным разрешениям экрана. Этот подход требовал, чтобы JavaScript узнавал разрешение экрана и загружал корректный CSS.

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

Термин адаптивный дизайн был Придуман Итаном Маркоттом в 2010 году и описывал использование трёх методов в сочетании.

  1. Первой была идея жидких сеток, нечто что уже исследовала Гилленвотер, что можно прочитать в статье Маркотта — Fluid Grids (опубликовано в 2009 в A List Apart).
  2. Вторым методом была идея жидких изображений. Используя очень простой метод настройки свойства max-width на 100%, изображения будут становиться меньше если содержащий столбец становится уже чем изначальный размер изображения, но никогда не становится больше. Это позволяет изображению уменьшаться чтобы соответствовать столбцу гибких размеров, а не перекрываться с ним, но не расти и становиться пиксельным если столбец становится шире изображения.
  3. Третьим ключевым компонентом были медиавыражения. Медиавыражения позволяют переключать тип макета применяя только CSS то, что Камерон Адамс исследовал, используя JavaScript. Вместо того чтобы иметь один макет для всех размеров экранов, макет мог изменяться. Боковые панели можно перемещать для маленьких экранов, либо отображать альтернативную навигацию.

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

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

Отзывчивый дизайн появился благодаря медиавыражениям (media queries). Спецификация Media Queries Level 3 стала Рекомендованным Кандидатом в 2009 году, что означает, что она была признана готовой к реализации в браузерах. Медиавыражения позволяют нам проводить серию тестов (например, является ли экран пользователя больше, чем определённая ширина или разрешение) и выборочно применять CSS к стилю страницы соответственно с нуждами пользователя.

Например, следующее медиавыражение проверяет отображается ли текущая страница как экранная медиа (а не как печатный документ) и имеет ли область просмотра ширину как минимум 800 px. CSS будет применяться к селектору .container только если эти две вещи истины.

@media screen and (min-width: 800px) {
  .container {
    margin: 1em 2em;
  }
} 

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

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

Узнать больше о медиавыражениях можно в документации MDN.

Отзывчивые сайты не просто меняют свой макет между контрольными точками, они построены на гибких сетках. Гибкая сетка подразумевает что вам не надо заботиться о каждом возможном существующем размере устройства и строить для них идеальный макет в пикселях. Такой подход был бы невозможен имея широкое множество существующих устройств разных размеров, как и факт того, что даже на ПК люди не всегда используют браузер с развёрнутым до максимума окном.

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

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

target / context = result 

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

.col {
  width: 6.25%; 
} 

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

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

На более широких экранах они перемещаются в два столбца:

Современные методы макетов такие как Макет с несколькими столбцами, Flexbox, и Grid являются отзывчивыми по умолчанию. Они все предполагают, что вы пытаетесь создать гибкую сетку и дают вам более лёгкий способ сделать так.

Multicol

Самый старый из этих методов — это multicol, когда вы задаёте column-count, это отражает то на сколько столбцов вы хотите разбить ваш контент. Далее браузер рассчитывает их размер, размер, который изменится согласно размеру экрана.

.container {
  column-count: 3;
} 

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

.container {
  column-width: 10em;
} 

Flexbox

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

В примере ниже каждый flex элемент будет принимать равное количество пространства во flex контейнере используя запись flex: 1 как описано в главе Flexbox: Гибкое изменение размеров flex элементов.

.container {
  display: flex;
}

.item {
  flex: 1;
} 

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

CSS grid

В макете CSS Grid единицы измерения fr позволяют распределять доступное пространство между дорожками сетки. Следующий пример создаёт grid контейнер с тремя дорожками размером 1fr. Это создаст три вертикальные дорожки, каждая занимающая одну часть свободного пространства в контейнере. Вы можете узнать больше об этом подходе к созданию сетки в теме Изучение Макета Grid в разделе Гибкие grids с единицами fr.

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
} 

Примечание: версия grid макета ещё проще, поскольку мы можем определить столбцы в .wrapper: пример, исходный код.

Самый простой подход к отзывчивым изображениям был описан в ранних статьях Маркотта по отзывчивому дизайну. По сути, вы берёте изображение максимального размера, которое могло понадобиться, и уменьшаете его. Этот подход до сих пор используется и в большинстве таблиц стилей вы найдёте следующий CSS:

img {
  max-width: 100%;
} 

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

Отзывчивые изображения, используя элемент <picture> и атрибуты srcset и sizes элемента <img> оба решают эти проблемы. Вы можете указать несколько размеров вместе с «подсказками» (метаданные, описывающие размер экрана и разрешение, для которых изображение лучше всего подходит), и браузер выберет наиболее подходящее изображение для каждого устройства, гарантируя, что пользователь загрузит изображение подходящего размера для устройства, которое они используют.

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

Вы можете найти подробное руководство по отзывчивым изображениям в разделе изучения HTML на MDN.

Элементом отзывчивого дизайна, не освещённого ранее в работе, была идея отзывчивой типографики. Главным образом, она описывает изменение размеров шрифта в зависимости от ширины экрана при помощи медиавыражений.

В этом примере, мы хотим задать нашему заголовку первого уровня 4rem, что значит, что он будет в четыре раза больше нашего базового размера шрифта. Это очень большой заголовок! Мы хотим этот гигантский заголовок только на экранах больших размеров, поэтому мы сначала создаём меньший заголовок, а затем используем медиавыржаение, чтобы переписать его для больших экранов, если мы знаем, что у пользователя есть экран размером как минимум 1200px.

html {
  font-size: 1em;
}

h2 {
  font-size: 2rem;
}

@media (min-width: 1200px) {
  h2 {
    font-size: 4rem;
  }
} 

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

В мобильных версиях заголовок меньше:

На компьютерах, однако, мы видим больший размер заголовка:

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

Using viewport units for responsive typography

An interesting approach is to use the viewport unit vw to enable responsive typography. 1vw is equal to one percent of the viewport width, meaning that if you set your font size using vw, it will always relate to the size of the viewport.

h2 {
  font-size: 6vw;
}

The problem with doing the above is that the user loses the ability to zoom any text set using the vw unit, as that text is always related to the size of the viewport. Therefore you should never set text using viewport units alone.

There is a solution, and it involves using calc(). If you add the vw unit to a value set using a fixed size such as ems or rems then the text will still be zoomable. Essentially, the vw unit adds on top of that zoomed value:

h2 {
  font-size: calc(1.5rem + 3vw);
}

This means that we only need to specify the font size for the heading once, rather than set it up for mobile and redefine it in the media queries. The font then gradually increases as you increase the size of the viewport.

If you look at the HTML source of a responsive page, you will usually see the following <meta> tag in the <head> of the document.

<meta name="viewport" content="width=device-width,initial-scale=1">

This meta tag tells mobile browsers that they should set the width of the viewport to the device width, and scale the document to 100% of its intended size, which shows the document at the mobile-optimized size that you intended.

Why is this needed? Because mobile browsers tend to lie about their viewport width.

This meta tag exists because when the original iPhone launched and people started to view websites on a small phone screen, most sites were not mobile optimized. The mobile browser would, therefore, set the viewport width to 960 pixels, render the page at that width, and show the result as a zoomed-out version of the desktop layout. Other mobile browsers (e.g. on Google Android) did the same thing. Users could zoom in and pan around the website to view the bits they were interested in, but it looked bad. You will still see this today if you have the misfortune to come across a site that does not have a responsive design.

The trouble is that your responsive design with breakpoints and media queries won’t work as intended on mobile browsers. If you’ve got a narrow screen layout that kicks in at 480px viewport width or less, and the viewport is set at 960px, you’ll never see your narrow screen layout on mobile. By setting width=device-width you are overriding Apple’s default width=960px with the actual width of the device, so your media queries will work as intended.

So you should always include the above line of HTML in the head of your documents.

There are other settings you can use with the viewport meta tag, however in general the above line is what you will want to use.

  • initial-scale: Sets the initial zoom of the page, which we set to 1.
  • height: Sets a specific height for the viewport.
  • minimum-scale: Sets the minimum zoom level.
  • maximum-scale: Sets the maximum zoom level.
  • user-scalable: Prevents zooming if set to no.

You should avoid using minimum-scale, maximum-scale, and in particular setting user-scalable to no. Users should be allowed to zoom as much or as little as they need to; preventing this causes accessibility problems.

Note: There is a CSS @ rule designed to replace the viewport meta tag — @viewport — however, it has poor browser support. When both are used the meta tag overrides @viewport.

Responsive design refers to a site or application design that responds to the environment in which it is viewed. It encompasses a number of CSS and HTML features and techniques and is now essentially just how we build websites by default. Consider the sites that you visit on your phone — it is probably fairly unusual to come across a site that is the desktop version scaled down, or where you need to scroll sideways to find things. This is because the web has moved to this approach of designing responsively.

It has also become much easier to achieve responsive designs with the help of the layout methods you have learned in these lessons. If you are new to web development today you have many more tools at your disposal than in the early days of responsive design. It is therefore worth checking the age of any materials you are referencing. While the historical articles are still useful, modern use of CSS and HTML makes it far easier to create elegant and useful designs, no matter what device your visitor views the site with.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  DOCTYPE

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

  название



 тело


 

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

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

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

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

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

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

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

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

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

Выбор компоновки

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

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

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

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

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

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

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

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

Подробнее о единицах измерения размера .

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 используются как с размерами шрифта, так и с размерами макета.

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

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

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

 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. Это стало очень распространенным веб-соглашением, и его можно легко узнать как мобильный сайт.

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

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

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

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

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

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

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

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

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

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

Когда я начал возиться с веб-дизайном в 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 для создания макетов.)

Планирование вашего первого веб-сайта — Макет вашего сайта Статья

© 2006 ~ Джун Камински, MSN PhD (c)

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

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

Первое, что нужно учитывать, — это размеры вашего макета. К сожалению, люди используют разные разрешения экрана монитора для просмотра веб-страниц. Небольшой процент людей по-прежнему использует разрешение 640 пикселей в ширину, а это означает, что ваш сайт должен быть очень маленьким, чтобы его можно было полностью увидеть на их экранах.Стандартная ширина мониторов большинства людей по умолчанию составляет 800 пикселей, что все еще довольно мало. 800 пикселей в настоящее время является стандартным наименьшим размером разрешения экрана для создания веб-сайта. Таким образом, рекомендуется, чтобы ваш сайт выглядел хорошо при ширине 800 пикселей и высоте 600 пикселей, чтобы этим зрителям не нужно было прокручивать вправо, чтобы просмотреть часть вашего сайта. Все чаще и чаще люди используют разрешение 1024 пикселя и более. Вы также должны захотеть, чтобы ваш сайт понравился этим зрителям. Одно из полезных действий, которое следует предпринять для этого, — определить ваши макетные таблицы в процентах, чтобы они соответствовали любой ширине.Например, если таблица имеет 100% ширину, она уместится на 100% экрана шириной 800 пикселей, а также экрана шириной 1024 пикселей. Также неплохо расположить основную таблицу по центру, чтобы она хорошо ложилась посередине экрана, независимо от того, какое разрешение используется для просмотра вашего сайта.

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

МАКЕТ-ШАБЛОН ОДИН

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

Щелкните здесь , чтобы загрузить копию шаблона 1 и HTML-код для его создания.

ДВУХСТОРОННИЙ ШАБЛОН

Шаблон 2 — это гораздо более простой дизайн, состоящий всего из двух «ячеек», включая тонкий боковой столбец и гораздо больший столбец с основным содержимым. Этот дизайн прост, но эффективен для сайта, на котором размещено большое количество текста и / или графики. Боковой столбец идеально подходит для ваших текстовых ссылок или кнопок навигации, в то время как основной столбец может содержать ваш контент.

Щелкните здесь , чтобы загрузить копию шаблона 2 и HTML-код для его создания.

МАКЕТ-ШАБЛОН ТРИ

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

Щелкните здесь , чтобы загрузить копию шаблона 3 и HTML-код для его создания.

МАКЕТ-ШАБЛОН ЧЕТЫРЕ

Template 4 — один из самых распространенных макетов в Интернете.Он состоит из одной длинной строки заголовка и второй строки под ней, разделенной на три столбца. Левый столбец обычно используется для заголовков или кнопок навигации, правый — для выделения контента, объявлений, рекламы или небольших изображений, а средний — для основного контента. Верхний ряд обычно используется для заголовков, окон поиска, небольших объявлений и иногда для второй области доступа к навигации.

Щелкните здесь , чтобы загрузить копию шаблона 4 и HTML-код для его создания.

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

Особенности этой серии:

© Джун Камински Опубликовано: 2006 г.

Создание макета блога в HTML

В этом посте мы создадим макет блога на всю страницу.

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

Вы можете посмотреть следующее видео или проследить его расширенную расшифровку стенограммы.

Просмотрите исходный код >

Чтобы начать этот урок, откройте стартовый проект, который вы начали в эпизоде ​​1, или просмотрите исходные файлы из эпизода 4.

Чтобы начать этот урок, откройте наш проект в VSCode.

В Терминале введите команду запуска npm run start , чтобы запустить проект, а затем откройте файл index.html.

Давайте скопируем наш файл semantic-layout.html и переименуем копию: blog-layout.html .

Зайдите в браузер и после localhost: 3000 добавьте /blog-layout.html . Он будет выглядеть так же, поскольку мы не меняли никакого содержания.

Давайте посмотрим, куда мы направляемся сегодня:

Вы увидите, что мы будем рассматривать всю страницу как единый пост нашего блога. Итак, вернувшись в VSCode, давайте обновим </code>, чтобы указать, что это новая страница. Распространенным условным обозначением является «Заголовок страницы (символ вертикальной черты) Имя веб-сайта», поэтому мы изменим его на: <br/> </p> <pre> <code> <title> Удивительное сообщение в блоге | Мой веб-сайт Войти в полноэкранный режимВыйти из полноэкранного режима

Затем мы переместим заголовок нашего блога из h3 в статье в h2 внутри заголовка :

  <заголовок>
  

Удивительное сообщение в блоге

Войти в полноэкранный режимВыйти из полноэкранного режима

Для сообщений в блогах важная информация, которую посетители хотят знать, — это кто и когда написал статью.В заголовке и после h2 мы добавим тег абзаца с текстом «Автор (и вы можете использовать свое имя) (вертикальная черта). Опубликовано: (и вы можете выбрать дату, я собираюсь 02.02.2020) «

  <заголовок>
  

Удивительное сообщение в блоге

Стефани Эклз | Опубликовано: 02.02.2020

Войти в полноэкранный режимВыйти из полноэкранного режима

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

  

Автор Стефани Эклз | Опубликовано: 02.02.2020

Войти в полноэкранный режимВыйти из полноэкранного режима

Затем сохраните и посмотрите на результат.

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

  

Автор Стефани Эклз | Опубликовано: 02.02.2020

Войти в полноэкранный режимВыйти из полноэкранного режима

Сохраните, и вы заметите, что размер действительно уменьшился.

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

Хорошо, перейдем к содержимому

. Давайте обновим первый

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

  

Введение в тему

Войти в полноэкранный режимВыйти из полноэкранного режима

Чтобы добавить больше контента, давайте скопируем теги h3 и p и их содержимое и вставим ниже.Затем замените вставленный h3 на «The Main Topic». Давайте скопируем пасту еще раз, но в новом наборе обновим h3 до h4 и изменим текст h4 на «Подраздел к основному». Это поможет вам запомнить, что теги заголовков имеют иерархическую структуру и должны использоваться последовательно.

  <статья>
  

Введение в тему

Лакричный торт, макарун, суфле, желейный торт. Леденцы, мороженое, бисквит, марципан.Макаруны с кунжутом желе-о.

Основная тема

Лакричный торт, макарун, суфле, желейный торт. Леденцы, мороженое, бисквит, марципан. Макаруны с кунжутом желе-о.

Подраздел к основному

Лакричный торт, макарун, суфле, желейный торт. Леденцы, мороженое, бисквит, марципан. Макаруны с кунжутом желе-о.

Войти в полноэкранный режимВыйти из полноэкранного режима

После последних p , которые у вас есть, давайте добавим новый тег:

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

Внутри

мы добавим

, а затем нашу цитату — не стесняйтесь использовать вашу настоящую любимую цитату, я просто скажу: «Кто-то сказал невероятную вещь».

  <цитата>
  

"Кто-то сказал невероятную вещь."

Войти в полноэкранный режимВыйти из полноэкранного режима

Чтобы семантически атрибутировать эту цитату, мы последуем за тегом p с тегом footer — эй, подождите! Разве у нас еще нет нижнего колонтитула на странице? Мы делаем! Но тег нижнего колонтитула может быть включен в несколько мест, поскольку он предназначен для использования в качестве нижнего колонтитула для любого секционируемого контента, а цитата является его собственным содержащимся разделом.

  <цитата>
  

"Кто-то сказал невероятную вещь."

<нижний колонтитул>
Войти в полноэкранный режимВыйти из полноэкранного режима

В пределах

мы будем использовать общее соглашение - , а затем добавим еще один тег для семантики — . Наконец, в цитате мы поместим имя автора цитаты — я скажу «Someone Awesome».

  <цитата>
  

"Кто-то сказал невероятную вещь."

<нижний колонтитул> - Кто-то замечательный
Войти в полноэкранный режимВыйти из полноэкранного режима

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

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


. Самозакрывающийся означает, что у него нет конечного тега.

Давайте добавим


между закрывающим тегом