Построение страницы html: Создание первой веб-страницы | WebReference

Курс по современной вёрстке

HTML/CSS — технология, которую легко освоить «по верхам», выучить основные теги и свойства, и что-то сразу можно создавать. Многие разработчики так и делают.

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

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

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

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

Курс также подойдёт для Javascript-разработчиков и backend-разработчиков, которые хотят повысить свой уровень понимания вёрстки, быть более компетентными в этой области.

Задавайте вопросы и пишите пожелания по программе курса в комментариях.

Курс идёт около 1 месяца.

До начала обучения: вводные материалы

Перед курсом мы попросим вас посмотреть лекции и материалы и выполнить «нулевое» домашнее задание по основам HTML/CSS. Это очень просто.

Мы также будем использовать систему Git/GitHub для обмена исходным кодом, так делает большинство проектов. Для тех, кому это в новинку — дадим крэш-курс и поможем разобраться.

Онлайн-занятия с преподавателем 2 раза в неделю

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

Домашние задания, обратная связь по ним

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

Чат

Между занятиями доступен групповой чат для общения и вопросов преподавателю.

Курсовой проект

На этом курсе мы делаем курсовой проект: библиотеку компонент. Большую часть вёрстки вы сделаете сами.

Результат

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

Вы умеете правильно создавать общий «лэйаут» страницы.

Вы умеете адаптивно верстать под разные современные браузеры и устройства.

Вы в курсе современных подходов к CSS-разработке, тенденций развития CSS и HTML.

Блок 1

Основы современной вёрстки

Начнём с проверки понимания и нюансов использования базовых CSS-свойств, основ, которые вы посмотрели дома по вводным материалам.

Далее разберём компонентную структуру веб-страницы с точки зрения HTML/CSS, подходы к организации и архитектуре CSS-кода: БЭМ, Atomic CSS и др.

Изучим основы адаптивной вёрстки, единицы измерения. Темизацию на основе CSS-переменных.

Компоненты:

• Кнопка (button).
• Подсказка (tooltip).
• «Аккордеон» (accordion).

Блок 2

Современная адаптивная вёрстка

Разберем различные способы верстки: статическую, резиновую, адаптивную и разницу между ними.

• Современные подходы к верстке: flex.
• Современные подходы к верстке: grid.
• Верстка для разных экранов, viewport устройства.
• Медиазапросы (@media).
• Изображения. Методы добавления изображений на страницу — плюсы, минусы и ограничения каждого (background-image, img и object). Способы оптимизации загрузки, поддержка разных разрешений.

Компоненты:

• Календарь.
• Гистограмма.
• Аватар пользователя.
• Модальное окно.

Блок 3

Верстка форм

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

Компоненты:

• Поле ввода.
• Радио.
• Чекбокс.
• Многострочное поле ввода.
• Кнопка.
• Вкладки (tabs).

Блок 4

Анимация

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

• Анимация: transition.
• Анимация: keyframes.
• Профилирование анимаций. “Тяжелые” для анимирования свойства.
• Flip-анимации.

Компоненты:

• Скелетон.
• Спиннер.
• Анимация гистограммы, аккордеона, всплывающей подсказки.

Блок 5

Сборка, пре- и постпроцессоры

Разберём, как пишется и собирается код в современных проектах, пре- и постпроцессоры на основе postCSS, поддержку css-свойств в разных браузерах, современные средства сборки CSS, автопрефиксер и минификацию.

Библиотека компонент:

• Интернет 256kb/s или быстрее для видео.

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

Все отзывы являются честными. Мы не модерируем их.

• Курс по современной вёрстке

  все отзывы

  С удовольствием оставляю отзыв об этом курсе.

  Очень понравился формат работы, структура и качество материала.

  Самым ценным для меня оказались детальные ревью PR’ов с домашкой от нашего ментора Германа.

  Как мне кажется – лучшая реклама, это если потребитель повторно пользуется продуктом. То в данном случае могу сказать, что записался на еще один курс по JS/DOM 🙂

  весь отзыв

• Курс по современной вёрстке

  все отзывы

  Отличный курс по всем параметрам, очень насыщенный и интересный. Все занятия, за исключением первой организационной встречи, длились дольше заявленных 1.5 часов. Дополнительно рассматривались интересные/важные темы, которые не указаны в описании курса.

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

• Курс по современной вёрстке

  все отзывы

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

• Курс по современной вёрстке

  Оценки от разработчиков, которые участвовали в курсе

  все отзывы

Курс регулярно обновляется. Все отзывы относятся к последней версии курса.

• Если объяснения будут вам непонятны
• Если курсы не дадут вам новых знаний и умений
• Если вы не сможете подключиться к системе онлайн-обучения

…то вы сможете получить деньги назад.

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

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

• При записи нужно выбрать способ оплаты «счёт на компанию», и документы будут автоматически сгенерированы: договор, акт и счёт.
• Для зарубежных компаний выдаём инвойс на английском языке.
• Физическим лицам даём справку об оплате, если нужна компании для компенсации расходов.
• Сведения о нас (для бухгалтерии): скачать архив с документами.

• У нас есть лицензия
• Можно сделать налоговый вычет при оплате переводом на банковский счёт: детали для РФ

Вы также можете на уведомления о наборе новых групп по этой программе.

Если остались вопросы – посмотрите в часто задаваемых, напишите в комментариях внизу этой страницы или на почту help@javascript. ru (ответ обычно в течение дня), а если срочно — задайте по телефону +7-903-5419441.

Создание сайтов HTML CSS — Стр 11

Верстка сайтов

101

разработчика, такими как Firebug для браузера Firefox или Developer Tools в

Opera.

1

3

Рисунок 4.6. Блоки сайта mon.gov.ru

Сайт содержит состоит из таблицы, которая разделяет его на две части – большую левую (1) и меньшую правую (2). Основное содержание располага- ется в левой части. В нее вложены еще 2 таблицы: таблица с основным гори- зонтальным меню (3) и таблица с меню раздела (4) и текстом страницы (5).

102

Тема 4

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

Спецификация CSS предлагает другой инструмент: построение страниц из блочных элементов DIV. Такой подход является более логичным, соответст- вует требованиям веб-стандартов и рекомендаций, но с другой стороны го- раздо более сложный. К сожалению, на настоящий момент браузеры недоста- точно полно поддерживают спецификацию CSS 2. Особенно это касается Internet Explorer версий 6 и 7. И разработчику приходится тратить значитель- ное время на борьбу с различными ошибками отображения. Блочная верстка рассматривается в следующей лекции.

Ресурсы в Интернете

∙CSS макеты. фиксированные, резиновые, эластичные. Плюсы и мину-

сы. http://habrahabr.ru/blogs/css/31209/

∙Всегда ли нужна «резиновая» верстка? http://habrahabr.ru/blogs/webdev/48735/

∙Табличная верстка. http://www.htmlbook. ru/content/?pid=16

Задания:

а) Создайте табличный макет для своего сайта. Выберите количество бло- ков/колонок, определите способ задания их ширины: фиксированный или «резиновый», напишите HTML и CSS код макета. Примените созданный шаблон для всех страниц сайта.

б*) Рассмотрите компоновку страниц сайтов с табличной версткой (напри- мер, edu.ru, msu.ru, mirea.ru). Включите отображение границ для ячеек всех таблиц. Сколько таблиц используется? Используется ли вложенность?

Верстка сайтов

103

Лекция 4.2. Блочная верстка

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

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

Реализуем пример с рис. 4.5 с помощью блочной верстки.

Сначала необходимо определить в HTML-коде страницы основные блоки:

<div>

<div></div> <div></div> <div></div> <div></div> <div></div>

</div>

Блок wrap является контейнером («оберткой») для всех остальных блоков страницы: заголовка, левой, средней и правой колонок и «подвала».

Теперь зададим правила CSS. Рекомендуется сначала сбросить параметры отступов для всех элементов:

* {

margin: 0;

padding: 0;

}

Зададим ширину блока wrap и отцентрируем его:

#wrap {

width: 1000px;

margin: 0 auto;

}

104

Тема 4

Теперь зададим параметры остальных блоков. Для того чтобы левая и правая колонки заняли свое место, используем правило float. Чтобы опустить

«подвал» вниз используем clear.

#header { padding: 5px;

background-color: #999999; text-align: center; height: 60px;

}

#left_col { float: left; padding: 5px; width: 200px;

background-color: #bbbbbb;

}

#center_col { float: left; padding: 5px; width: 570px;

background-color: #ffffff;

}

#right_col { float: right; padding: 5px; width: 200px;

background-color: #bbbbbb;

}

#footer { clear: both; padding: 5px;

background-color: #999999; text-align: center; height: 20px;

}

Результат показан на рис. 4.7.

Верстка сайтов

105

Рисунок 4.7. Верстка в три колонки с помощью блоков DIV

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

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

ка wrap, как у боковых колонок.

106

Тема 4

#wrap {

width: 1000px;

margin: 0 auto;

background-color: #bbbbbb;

}

Рисунок 4.8. Верстка в три колонки с помощью блоков DIV

Хотя высота колонок не изменилась, пользователю это заметно не будет.

Верстка сайтов

107

В Интернете существует множество готовых CSS-шаблонов и инструментов для генерации новых. Во многих случаях разумно воспользоваться ими.

Коллекции шаблонов:

∙http://opensourcetemplates.org/

∙http://www.minimalistic-design.net/

∙http://csseasy.com/

∙http://www.ex-designz.net/template/tempcat.asp?cat_id=13

∙http://www.csstemplates.net/free-css-templates.php

∙http://blog.html.it/layoutgala/

Генераторы:

∙http://csstemplater.com/

∙http://www.inknoise.com/experimental/layoutomatic.php

∙http://csscreator.com/version2/pagelayout.php

∙http://www.maketemplate.com/csstemplate/

Ресурсы в Интернете

∙CSS: блочная верстка. http://zhilinsky.ru/2007/05/24/css-blochnaya- verstka/

∙Блочная верстка. http://www.websovet.com/blochnaya-verstka-urok-1

∙Колонки одинаковой высоты. http://www.htmlbook.ru/content/?id=109

∙Две колонки, навигация слева. http://htmlbook.ru/content/?id=107

Задания:

а) Переделайте табличный макет своего сайта в блочный.

б*) Рассмотрите компоновку страниц сайтов с блочной версткой (например, vkontakte. ru, habrahabr.ru). Включите отображение границ для всех блоков. Изучите структуру шаблона.

Учебное пособие по Django, часть 5: Создание нашей домашней страницы — Изучите веб-разработку

• Предыдущая
• Обзор: Джанго
• Следующий

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

Предпосылки:	Прочитайте введение в Джанго. Выполните предыдущие разделы руководства (включая часть 4 руководства по Django: административный сайт Django).
Цель:	Научитесь создавать простые карты и представления URL-адресов (где данные не закодированы в URL-адресе), получать данные из моделей и создавать шаблоны.

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

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

• Преобразователи URL-адресов для пересылки поддерживаемых URL-адресов (и любой информации, закодированной в URL-адресах) в соответствующие функции просмотра.
• Функции просмотра для получения запрошенных данных от моделей, создания HTML-страниц, отображающих данные, и возврата страниц пользователю для просмотра в браузере.
• Шаблоны для использования при отображении данных в представлениях.

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

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

URL-адреса, которые нам понадобятся для наших страниц:

• каталог/ — домашняя (индексная) страница.
• каталог/книги/ — Список всех книг.
• каталог/авторы/ — Список всех авторов.
• catalog/book/ — Подробное представление для конкретной книги с первичным ключом поля (по умолчанию). Например, адрес третьей книги, добавленной в список, будет 9.0052 /каталог/книга/3 .
• catalog/author/ — Подробное представление для конкретного автора с полем первичного ключа . Например, URL для 11-го автора, добавленного в список, будет /catalog/author/11 .

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

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

Примечание: С Django вы можете создавать свои URL-адреса так, как вам нужно — вы можете кодировать информацию в теле URL-адреса, как показано выше, или включать параметры GET в URL-адрес, например /book/?id=6 . Какой бы подход вы ни использовали, URL-адреса должны быть чистыми, логичными и удобочитаемыми в соответствии с рекомендациями W3C. Документация Django рекомендует кодировать информацию в теле URL-адреса для улучшения дизайна URL-адреса.

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

Первая страница, которую мы создадим, — это индексная страница ( каталог / ). Страница индекса будет включать в себя некоторый статический HTML, а также сгенерированное «количество» различных записей в базе данных. Чтобы это работало, мы создадим сопоставление URL-адресов, представление и шаблон.

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

Сопоставление URL-адресов

Когда мы создали каркас веб-сайта, мы обновили locallibrary/urls.py , чтобы каждый раз при получении URL-адреса, начинающегося с catalog/, модуль URLConf catalog.urls обрабатывал оставшуюся подстроку.

Следующий фрагмент кода из locallibrary/urls.py включает модуль catalog.urls :

 urlpatterns += [
    путь('каталог/', включить('каталог.urls')),
]
 

Примечание: Всякий раз, когда Django встречает функцию импорта django. urls.include() , он разбивает строку URL-адреса на указанный конечный символ и отправляет оставшуюся подстроку включенному модулю URLconf для дальнейшей обработки.

Мы также создали файл-заполнитель для модуля URLConf с именем /catalog/urls.py . Добавьте в этот файл следующие строки:

 шаблоны URL = [
    путь('', views.index, имя='индекс'),
]
 

Функция path() определяет следующее:

• Шаблон URL, представляющий собой пустую строку: '' . Мы подробно обсудим шаблоны URL при работе с другими представлениями.
• Функция просмотра, которая будет вызываться при обнаружении шаблона URL: views.index , которая является функцией с именем index() в файле views.py .

Функция path() также указывает параметр имени , который является уникальным идентификатором для этого конкретного сопоставления URL-адреса . Вы можете использовать это имя, чтобы «обратить» преобразователь, т. е. для динамического создания URL-адреса, указывающего на ресурс, для обработки которого предназначен преобразователь. Например, мы можем использовать параметр name для ссылки на нашу домашнюю страницу с любой другой страницы, добавив следующую ссылку в шаблон:

 Главная.
 

Примечание: Мы можем жестко закодировать ссылку как в Главная ), но если мы изменим шаблон для нашей домашней страницы, например, на / каталог/индекс ) шаблоны больше не будут корректно связываться. Использование обратного сопоставления URL более надежно.

Представление (на основе функции)

Представление — это функция, которая обрабатывает HTTP-запрос, извлекает необходимые данные из базы данных, отображает данные на HTML-странице с использованием HTML-шаблона, а затем возвращает сгенерированный HTML-код в HTTP-запросе. ответ для отображения страницы пользователю. Индексное представление следует этой модели — оно извлекает информацию о числе 9.0052 Book , BookInstance , доступные BookInstance и Author записи, которые у нас есть в базе данных, и передает эту информацию в шаблон для отображения.

Откройте catalog/views.py и обратите внимание, что файл уже импортирует функцию быстрого доступа render() для создания файла HTML с использованием шаблона и данных:

 из django.shortcuts import render
# Создайте свои представления здесь.
 

Вставьте следующие строки внизу файла:

 из импорта .models Книга, Автор, Экземпляр книги, Жанр
Индекс защиты (запрос):
    """Функция просмотра главной страницы сайта."""
    # Сгенерировать количество некоторых основных объектов
    num_books = Book.objects.all().count()
    num_instances = BookInstance.objects.all().count()
    # Доступные книги (status = 'a')
    num_instances_available = BookInstance. objects.filter(status__exact='a').count()
    # 'all()' подразумевается по умолчанию.
    num_authors = Автор.объектов.счетчик()
    контекст = {
        'num_books': количество_книг,
        'количество_экземпляров': num_instances,
        'количество_экземпляров_доступно': num_instances_available,
        'количество_авторов': количество_авторов,
    }
    # Визуализировать HTML-шаблон index.html с данными в контекстной переменной
    вернуть рендеринг (запрос, 'index.html', контекст = контекст)
 

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

Первая часть функции представления извлекает количество записей, используя атрибут objects.all() классов модели. Он также получает список из объектов BookInstance со значением «a» (доступен) в поле статуса. Вы можете найти больше информации о том, как получить доступ к данным модели, в нашем предыдущем руководстве Django Tutorial Part 3: Using models > Searching for records.

В конце функции просмотра мы вызываем функцию render() для создания HTML-страницы и возврата страницы в качестве ответа. Эта функция быстрого доступа объединяет ряд других функций, чтобы упростить очень распространенный вариант использования. Функция render() принимает следующие параметры:

• исходный запрос объект, который является HttpRequest .
• HTML-шаблон с заполнителями для данных.
• и контекст , которая представляет собой словарь Python, содержащий данные для вставки в заполнители.

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

Шаблон

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

Приложение Django, созданное с использованием startapp (подобно скелету этого примера) будет искать шаблоны в подкаталоге с именем « templates » ваших приложений. Например, в представлении index, которое мы только что добавили, функция render() ожидает найти файл index.html в /locallibrary/catalog/templates/ и вызовет ошибку, если файл нет.

Вы можете проверить это, сохранив предыдущие изменения и зайдя на 127.0.0.1:8000 в вашем браузере — он отобразит довольно интуитивное сообщение об ошибке: « TemplateDoesNotExist at /catalog/» и другие подробности.

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

Расширение шаблонов

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

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

Следующий фрагмент кода представляет собой образец базового шаблона из файла base_generic.html . Вскоре мы создадим шаблон для LocalLibrary. Приведенный ниже пример включает в себя общий HTML-код с разделами для заголовка, боковой панели и основного содержимого, отмеченных именованными тегами шаблона block и endblock . Вы можете оставить блоки пустыми или включить содержимое по умолчанию для использования при отображении страниц, полученных из шаблона.

Примечание: Шаблон 9Теги 0045 — это функции, которые можно использовать в шаблоне для циклического просмотра списков, выполнения условных операций на основе значения переменной и т. д. Помимо тегов шаблона, синтаксис шаблона позволяет ссылаться на переменные, которые передаются в шаблон из представления, и использовать фильтры шаблона для форматирования переменных (например, для преобразования строки в нижний регистр).

 

<голова>
  {% block title %}{% endblock %}

<тело>
  {% block sidebar %}{% endblock %}
  {% block content %}{% endblock %}


 

При определении шаблона для конкретного представления мы сначала указываем базовый шаблон с помощью тега шаблона extends — см. пример кода ниже. Затем мы объявляем, какие разделы из шаблона мы хотим заменить (если есть), используя разделы block / endblock , как в базовом шаблоне.

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

 {% расширяет "base_generic.html" %}
{% заблокировать содержимое %}
   
Главная страница местной библиотеки
 
  
Добро пожаловать на LocalLibrary, веб-сайт, разработанный Mozilla Developer Network!
{% конечный блок%}
 

Базовый шаблон LocalLibrary

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

Примечание: Мы также вводим два дополнительных тега шаблона: url и load static . Эти теги будут описаны в следующих разделах.

Создайте новый файл base_generic.html в /locallibrary/catalog/templates/ и вставьте в файл следующий код:

 

<голова>
  {% block title %}{% endblock %}
  <мета-кодировка="utf-8">
  
  
  
  {% статическая загрузка %}
  

<тело>
  <дел>
    <дел>
      <дел>
      {% заблокировать боковую панель %}
        <ул>
          
Главная
          
Все книги
          
Все авторы
        
     {% конечный блок%}