Современная жизнь немыслима без web-сервисов, ежедневно приносящих дивиденды в самых разных областях человеческой деятельности. А значит, профессия web-разработчика еще долго будет оставаться высокооплачиваемой и востребованной на рынке IT-специалистов. Существует множество решений и инструментов на разных языках программирования, упрощающих и ускоряющих web-разработку. В рамках данного курса освещается построение web-приложений на языке Python. Курс читают разработчики, применяющие Python в проектах, которыми ежедневно используют миллионы людей. В данном курсе вы сможете приобрести как базовые знания о функционировании современного интернета в целом, так и практические навыки создания интернет-приложений на языке Python.
Основные свойства CSS
Loading...
Из курса от партнера Moscow Institute of Physics and Technology
Создание Web-сервисов на Python
27 оценки
Moscow Institute of Physics and Technology
27 оценки
Курс 3 из 4 — Specialization Программирование на Python
Из урока
Веб интерфейсы с Django и Bootstrap
В этом модуле мы познакомимся с архитектурой web-фреймворков, разберём существующие web-фреймворки на Python и наконец создадим наше первое web-приложение на Python при помощи фреймворка Django. После этого мы разберём структуру Django-приложения и работу с базами данных при помощи инструментов Django. Напоследок нас ждёт знакомство с HTML и CSS, чтобы наше приложение выглядело более привлекательным.
Познакомьтесь с преподавателями
Абрамов Тимур
Пестров Никита
Опрышко Александр
Партилов Алексей
В этом видео мы добавим в наш проект, который мы создавали ранее,
в предыдущих видео, шаблон, добавим в
него стили и на примере рассмотрим небольшую часть свойств.
Для начала давайте создадим структуру проекта для шаблонов.
Нам необходимо добавить папку temlates в корень проекта
и папку temlates во внутрь нашего приложения.
Зачем мы и туда, и туда добавляем?
В корневой папке temlates будут храниться шаблоны,
которые относятся ко всему проекту, базовые шаблоны.
Например, base html, от которого будет наследоваться все следующие шаблоны,
или например, там счетчики гугл аналитики или яндекс метрики,
которые используются повсеместно на всех страницах и они нужны везде.
А внутри приложений будут находиться шаблоны,
которые относятся именно к этому приложению.
Таким образом мы будем разделять проект на логические части.
Для начала добавим папку temlates и создадим в ней base html.
Теперь нужно сказать джанге о том,
что необходимо искать в корневой папке temlates шаблоны.
Для этого нам необходимо пойти в курсораблок,
найти файл с settings.py и найти там параметр temlates.
Мы тут видим, что указан параметр апдирс, насколько мы помним из предыдущих видео,
если он указан в тру,
то джанго будет искать шаблоны внутри приложения.
Также нам нужно указать, чтобы она искал в корневой папке temlates.
Для этого нам нужно указать путь в дирс,
для этого мы напишем os.path.join(BASE_DIR, 'templates').
Что это значит? os.path.join соединяет путь,
который находится в переменной BASE_DIR, 'templates',
то есть корень нашего проекта плюс templates.
Движок шаблонов будет искать также в этой папке шаблон.
Теперь давайте отредактируем base html. Мы видим, что пачарн нам создал файлик
он создал html страницы. Вместо тайтла мы сделаем блок. Блок тайтл.
После этого сделаем блок и блок контент.
Зачем это нужно? Все наследники будут наследоваться от base html.
Нам необходимо будет только переопределить эти блоки,
то есть тайтл, стайлс и контент.
В стайлс будет находиться наш стиль.
Это мы будем просматривать немного позже.
Теперь давайте создадим шаблон внутри папки, внутри нашего приложения, кор.
Сдаем папку templates в ней в папку кор. Это сделано для того, чтобы в дальнейшем,
когда мы в коде указывали этот шаблон, нам было проще понять,
какому приложению он относится и создаем в нем файл index.html.
Теперь нам не нужна вот эта структура,
мы просто берем и наследуемся с помощью тега extends от нашего базового шаблона,
base.html и переопределяем только те блоки, которые нам нужны, блок тайтл,
там укажем индекс и блок контент и напишем контент.
Теперь нам нужно пойти в нашу юху, о котором мы писали ранее,
которое мы отдавали просто HTTP и заменить наш шорткат рендер.
Насколько мы помним из предыдущих видео, там необходимо передать реквест, имя шаблона,
корр индекс, вот о чем я говорил. То есть внутри кода мы будем указывать путь к шаблону
и там будет название нашего приложения. Это облегчает понимание кода.
Мы добавили рендер нашего шаблона в нашу юху и теперь
давайте запустим наш дев сервер и посмотрим, что же получилось.
Собственно мы видим то, что
у нас появилась страница контент. Теперь давайте добавим стили.
Так же как с шаблонами, необходимо добавить папку статик,
в ней будет храниться вся статика нашего проекта. В ней добавляем папку кор,
также для того, чтобы понимать какому приложению относится статика,
добавляем в ней еще одну
папку css с типом статики ив ней наконец добавим наш файл со стилями index.css и
напишем там наш первый стиль: див калор и напишем код красного цвета.
То есть этот селектор означает, что ко всем тегам див применить цвет красный.
И давайте этот файл со стилями подключим.
Открываем наш шаблон index.html и теперь нам
необходимо переопределить блок стайлс и подключить наш стиль,
линк реал стайлшип, тайп текст сиэсэс, и хреф. Путь нельзя так просто указать,
его необходимо указать с помощью тега статик и написать тут путь к нашей статике,
нашему сиэсэс файлу кор, css index.css. [inaudible] как неопознанный тег, чтобы
он его распознал, необходимо его подключить.
Теперь, так как мы применили стиль ко всем тегам див,
нам необходимо наш контент обернуть в див и тогда стиль наш применяется.
Собственно зачем мы таким хитрым образом подключили наш стиль с помощью тега статик?
Сейчас мы откроем браузер и посмотрим.
Мы видим, что наш стиль подключился и применялся и контент у нас красный.
Если открыть панель разработчика, то мы увидим два запроса: запрос на индекс страницу,
на html этой страницы и запрос на файл статики index.css.
Если мы откроем и увидим, то путь будет /static/core/css/index.css.
Это тег он берёт и подставляет нинкий префикс,
по которому будут отдаваться статика нашим дев серверам.
Если увидеть, то в логе запросов у нас будет два запроса,
это запрос на страницу index.html и /static/core/css/index.css.
Когда дев серверы получают запрос со статикой, он знает,
что это запрос по которому необходимо
дать статический файл и он начинает искать в папках,
внутри приложениях под названием статик.
Теперь перейдем к рассмотрению стилей. Начнем с свойств текста.
Придем в наш файл с стилями index.css,
уберем наш предыдущий селектор и там пишем селектор для класса
тест и добавим этот класс к нашему контенту. Класс тест. Первое css свойство,
которое мы рассмотрим, это тип шрифта фонт фемили, например, roboto
и для сравнения добавим просто контент без этого стиля. Откроем страничку и видим,
что шрифты имеют разный тип. Т.е. к этому блоку применялось css свойство.
Для того, чтобы указать курсив, шрифты или наклонный штрих,
необходимо указать фонт стайл, и мы увидим, что шрифт станет курсивом.
Для того, чтобы указать, насколько жирный шрифт, необходимо указать свойство фонт вейт.
Это будет означать, что мы шрифт сделали. Для того, чтобы изменить размер шрифта,
необходимо указать фонт сайз и указать размер шрифта в пикселях.
Мы видим, что шрифт стал больше. Теперь рассмотрим простейшие свойства цвета.
Это калор, который мы видели ранее, т.е. указывает цвет внутри блока, калор, например,
ред, красный, мы видим, что этот контент опять покраснел и беграунд калор,
это цвет фона, например зеленый. И мы видим, что сейчас весь наш блок,
весь фон нашего блока стал зеленым, а так, как эта блочный элемент,
он занимает все ширину страницы. Теперь рассмотрим css свойства отступов.
Ширина блока вообще создается из его содержимого, его паддингов,
то есть отступов, грубо говоря, вовнутрь, его границы и его маржинов, отступов снаружи.
Давайте это посмотрим. Для этого создадим второй блок - тест два,
применим к нему эти свойства. Напишем селектор для тест два, напишем,
что у него размер, высота 100 пикселей, паддинги у него 10 пикселей,
граница, указывается с помощью свойства бордер, 5 пикселей,
она сплошная солид и цветом зеленый, цвет внутри будет также красный и отступы
снаружи - марджини пусть будут тоже 10 пикселей.
Откроем и посмотрим что же у нас получилось.
Откроем наш инспектор и посмотрим на блок див и откроем справа панель,
где очень хорошо это иллюстрируется.
Отступы снаружи, маржин, они занимают 10 пикселей,
наша граница занимает у нас 5 пикселей,
нашы отступы во внутрь занимают 10 пикселей и наша ширина,
это весь наш экран,
и высота ее 100 пикселей, которые мы указали.
Т.е. ширина нашего в иысота нашего элемента складывается не только из его содержимого,
но еще и из отступов, ширины границ и отступа снаружи.
Давайте рассмотрим режим отображения элементов. Оставим блок тест
два и перейдем в наши стили. Начнем с свойства и его значения дисплей нон,
это режим отображения, что элемент не видим и не занимает место, то есть он у нас пропал.
Термин дисплей блок, он себя будет вести так, как блочный элемент,
так же как ранее. Если сделать дисплей инлайн,
то он будет вести себя как строчный элемент.
Мы видим, что свойства высоты перестало работать и ширину,
которое он занимает, ровно то, что занимает его отступы, граница и контент.
Дисплей инлайн блок, это блочный элемент,
который не разрывает строку, то есть, если мы напишем два блока
подряд с режимом отображения на инлайн блок, то они будут располагаться на одной
и той же странице, но они будут вести себя так же, как и блочный элемент.
Т.е. они отображаются на строке.
В итоге в этом видео мы рассмотрели, как нам добавить шаблоны,
к нему подключить стили и небольшую часть css свойств.
Все остальные свойства остается вам на самостоятельное изучение.
В следующем уроке мы рассмотрим как же верстать страницу
с помощью бутстрапа и со знанием вот тех стилей,
которые мы сейчас рассмотрели.
Ознакомьтесь с нашим каталогом
Присоединяйтесь бесплатно и получайте персонализированные рекомендации, обновления и предложения.
Coursera делает лучшее в мире образование доступным каждому, предлагая онлайн-курсы от ведущих университетов и организаций.
© Coursera Inc., 2018 Все права защищены.
