Презентация на тему: 21 занятие

21 занятие
21 занятие
Какой тэг нужен для...?
Параграф
Заголовк и
Перевод строки
Выделение жирным
Универсальный блочный
Универсальный строчный
Выделение курсивом
Таблица
Зачем нужен...?
<title></title>
… title=“***” …
<link / >
< img / >
<a></a>
Зачем нужно CSS свойство...?
display
padding-top : 10px;
margin-bottom : 15 px ;
Какое свойство нужно для...?
Ширина блочного контейнера
Фон с картинкой
Рамка
Высота блочного контейнера
Внутренний отступ
Размер текста
Внешний отступ
Цвет текста
Цвет фона
Какова реальная ширина блока?
Какова реальная высота блока?
Web программирование с flask
Статические страницы
21 занятие
Задание
21 занятие
21 занятие
Задание
21 занятие
Задание
Названия файлов и папок
MVC
Задание
Шаблонизатор
Задание
Передача значений в шаблон
21 занятие
Задание
Наследование шаблонов
Задание
21 занятие
Задание
21 занятие
Задание
21 занятие
21 занятие
Код функции table
21 занятие
Динамический url
Динамический url
21 занятие
21 занятие
21 занятие
Задание
21 занятие
21 занятие
Задание
Основные коды состояний
Задание
21 занятие
21 занятие
21 занятие
21 занятие
21 занятие
21 занятие
1/77
Средняя оценка: 4.5/5 (всего оценок: 4)
Код скопирован в буфер обмена
Скачать (447 Кб)
1

Первый слайд презентации: 21 занятие

Школа::Кода «Основы программирования на языке Python »

Изображение слайда
2

Слайд 2

2 Проверка присутствия

Изображение слайда
3

Слайд 3: Какой тэг нужен для...?

Изображение слайда
4

Слайд 4: Параграф

<p></p>

Изображение слайда
5

Слайд 5: Заголовк и

<h1></h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6> <h7></h7>

Изображение слайда
6

Слайд 6: Перевод строки

< br >

Изображение слайда
7

Слайд 7: Выделение жирным

<strong></strong>

Изображение слайда
8

Слайд 8: Универсальный блочный

<div></div>

Изображение слайда
9

Слайд 9: Универсальный строчный

<span></span>

Изображение слайда
10

Слайд 10: Выделение курсивом

< em ></ em >

Изображение слайда
11

Слайд 11: Таблица

<table></table> < tr ></ tr > - строки < th ></ th > - заголовочные ячейки <td></td> - ячейки данных

Изображение слайда
12

Слайд 12: Зачем нужен...?

Изображение слайда
13

Слайд 13: <title></title>

Заголовок страницы (окна браузера) Находится в тэге head

Изображение слайда
14

Слайд 14: title=“***” …

Подсказка при наведении на элемент

Изображение слайда
15

Слайд 15: <link / >

Привязка стилей, шрифтов,... Находится в тэге head Атрибуты href rel type ( до html5)

Изображение слайда
16

Слайд 16: < img / >

Изображение Атрибуты src width height

Изображение слайда
17

Слайд 17: <a></a>

Ссылка на другую страницу или якорь Атрибуты href

Изображение слайда
18

Слайд 18: Зачем нужно CSS свойство...?

Изображение слайда
19

Слайд 19: display

тип блока block inline inline-block …

Изображение слайда
20

Слайд 20: padding-top : 10px;

верхний внутренний отступ в 10 пикселей

Изображение слайда
21

Слайд 21: margin-bottom : 15 px ;

нижний внешний отступ в 15 пикселей

Изображение слайда
22

Слайд 22: Какое свойство нужно для...?

Изображение слайда
23

Слайд 23: Ширина блочного контейнера

width width: 50px; width: 25%;

Изображение слайда
24

Слайд 24: Фон с картинкой

background-image background-image: url (‘../images/pic.jpg’); background background: #FFF url (‘../images/pic.jpg ’) no-repeat;

Изображение слайда
25

Слайд 25: Рамка

border Черная сплошная толщиной в 1 пиксель border: solid 1px #000; Белая пунктиром толщиной в 5 пикселей border: dashed 5px #FFF;

Изображение слайда
26

Слайд 26: Высота блочного контейнера

height height: 250px; height: 100%;

Изображение слайда
27

Слайд 27: Внутренний отступ

padding padding: 5px; padding: 5px 10px; padding: 5px 10px 15px 20px;

Изображение слайда
28

Слайд 28: Размер текста

font-size font-size: 14px; font-size: 12pt; font-size: 1.2em; font-size: 110%;

Изображение слайда
29

Слайд 29: Внешний отступ

margin margin: 5px; margin: 5px 10px; margin: 5px 10px 15px 20px;

Изображение слайда
30

Слайд 30: Цвет текста

color color: white; color: #FFF; color: rgb (255, 255, 255);

Изображение слайда
31

Слайд 31: Цвет фона

background-color background- color: black; background- color : #000; background- color : rgb (0, 0, 0); background-color: rgba (0, 0, 0, 0. 5);

Изображение слайда
32

Слайд 32: Какова реальная ширина блока?

width: 100px; margin: 5px 15px; padding: 5px; Реальная ширина: 15 + 5 + 100 + 5 + 15 = 140

Изображение слайда
33

Слайд 33: Какова реальная высота блока?

height: 200px; margin: 10px 15px 20px 40px; padding: 15px 10px; border: solid 2px black; Реальная высота: 10 + 2 + 15 + 200 + 15 + 2 + 20 = 264

Изображение слайда
34

Слайд 34: Web программирование с flask

Изображение слайда
35

Слайд 35: Статические страницы

216. 109.112.135 209. 73. 168. 74 216.109.112.135 209.73.168.74 site.com GET http://site.com/posts/index.html Статические страницы

Изображение слайда
36

Слайд 36

216. 109.112.135 209. 73. 168. 74 216.109.112.135 209.73.168.74 site.com GET http://site.com/posts/ <!DOCTYPE html> <html lang ="en"> <head> <meta charset="UTF-8"> <title> Список пользователей</ title> <link rel =" stylesheet " href ="/static/styles/style.css"> </head> <body> <div id="main"> <div id="menu"> <a href ="/"> Главная</ a> | <a href ="/table"> Таблица</ a>| <a href ="/users"> Пользователи</ a> </div> <div id="content"> <table border="1" cellspacing ="0"> < tr >< th > Фамилия</ th > < th > Имя</ th > < th > Отчество</ th > </ tr >< tr > <td> Яровая</ td> <td> Мария</ td> <td> Ивановна</ td> </ tr > </table> </div> </div> </body> </html> Динамические страницы

Изображение слайда
37

Слайд 37: Задание

Создать папку проекта Создать папку files Скопировать файлы в папку files Создать python файл app.py

Изображение слайда
38

Слайд 38

from flask import Flask app = Flask(__name__) @ app.route ("/") def home(): return " Привет, мир !" @ app.route ("/about") def about(): return " О нас " if __name__ == "__main__": app.run (debug=True) # импортировать Flask # создать объект сервера # прописать путь для этой функции # создать функцию главной страницы # что вернуть браузеру # прописать путь # создать функцию страницы # вернуть браузеру # если запущен отсюда # запустить сервер

Изображение слайда
39

Слайд 39

@ app.route (“ ПУТЬ_К_СТРАНИЦЕ ”) def НАЗВАНИЕ_ФУНКЦИИ_СТРАНИЦЫ (): # обработка данных return ЧТО_ВЕРНУТЬ_КЛИЕНТУ

Изображение слайда
40

Слайд 40: Задание

Запустить сервер ( файл app.py) Открыть сайт в Chrome Открыть « / about »

Изображение слайда
41

Слайд 41

Марина Карина Маша Оля names.txt Марина Карина Маша Оля

Изображение слайда
42

Слайд 42: Задание

Вернуть в функции home данные из файла names.txt names = list() with open("files/names.txt", encoding="utf-8") as f: for raw_line in f: names.append ( raw_line.strip ()) return "< br >".join(names)

Изображение слайда
43

Слайд 43: Названия файлов и папок

пробелы (“my new shoes.jpg”) русские (“ фото.jpg”) lower_case (нижний регистр без пробелов) Windows – style.css = Style.css UNIX – style.css ≠ Style.css

Изображение слайда
44

Слайд 44: MVC

Model View Controller Описание структуры данных и методов для них Функции для работы с данными (например, отправка email ) Представления данных пользователю ( html код) Описание страниц и тех данных, которые нужно отправить на представление

Изображение слайда
45

Слайд 45: Задание

Создать папку templates (именно ее!) Создать в ней файл index.html Добавить в импорт render_template from flask import Flask, render_template Вернуть index.html в home return render_template ( 'index.html' )

Изображение слайда
46

Слайд 46: Шаблонизатор

Тэги ( открывающие и закрывающие ) {% tag_name %} Значения {{ var_name }}

Изображение слайда
47

Слайд 47: Задание

Создать html файл names.html Добавить код страницы names, прописать путь « /names », вернуть names.html @ app.route ( "/names" ) def names (): return render_template ( 'names.html' )

Изображение слайда
48

Слайд 48: Передача значений в шаблон

#app.py name = " Вл а димир " return render_template (‘names.html', name=name) #names.html <p> Имя пользователя: {{ name }}</p>

Изображение слайда
49

Слайд 49

#app.py entities = list() with open("files/names.txt", encoding="utf-8") as f: for raw_line in f: entities.append ( raw_line.strip ()) return render_template ('names.html', entities=entities) #names.html {% for name in entities %} <p>{{ name }}</p> {% endfor %}

Изображение слайда
50

Слайд 50: Задание

Создать папку static ( именно ее! ) папку css файл style.css папку images Прописать стили в head / static/ css /style.css

Изображение слайда
51

Слайд 51: Наследование шаблонов

menu side bar content 1 контент главной страницы menu side bar content 2 page2.html контент со списком пользователей контент со списком пользователей контент главной страницы контент c таблицей контент c таблицей index.html index.html users_list.html table.html

Изображение слайда
52

Слайд 52: Задание

Создать в папке templates html файл base.html и сделать шаблон Добавить блоки: В тэге title (head) : {% block title %}{% endblock %} В body : {% block content %}{% endblock %}

Изображение слайда
53

Слайд 53

<!DOCTYPE html> <html lang =" ru "> <head> <meta charset="UTF-8"> <link rel =" stylesheet " href ="/static/ css /style.css"> <title>{% block title %} Мой сайт{% endblock %}</title> </head> <body> <div id="main"> <div id="menu"> <a href =“/"> Главная </a> | <a href =“/table"> Таблица </a> | <a href =“/users"> Пользователи </a> </div> <div id="content"> {% block content %}{% endblock %} </div> </div> </body> </html>

Изображение слайда
54

Слайд 54: Задание

Наследоваться от base.html {% extends 'base.html' %} Переписать блоки: {% block title %} {% block content %}

Изображение слайда
55

Слайд 55

{% extends 'base.html' %} {% block title %} Главная{% endblock %} {% block content %} <p> Это контент главной страницы! </p> {% endblock %}

Изображение слайда
56

Слайд 56: Задание

Создать страницу table : функцию table путь /table table.html, наследованный от base.html вернуть table.html Скопировать код чтения из файла. Заменить names.txt на humans.txt

Изображение слайда
57

Слайд 57

Бакарюк;Иван;Петрович Васильева;Марина;Львовна Иванова;Светлана;Петровна Петров;Максим;Витальевич Яровая;Мария;Ивановна humans.txt Фамилия Имя Отчество Бакарюк Иван Петрович Васильева Марина Львовна Иванова Светлана Петровна Петров Максим Витальевич Яровая Мария Ивановна

Изображение слайда
58

Слайд 58

data = raw_line.strip ().split(';') entities.append ({' last_name ': data[0], 'name': data[1], 'surname': data[2]}) data = raw_line.strip ().split(';') keys = [' last_name ', 'name', ‘surname'] item = dict () for i in range( len (data)): item[keys[ i ]] = data[ i ] entities.append (item)

Изображение слайда
59

Слайд 59: Код функции table

@ app.route ("/table") def table(): entities = list() with open('humans.txt', encoding="utf-8") as f: for raw_line in f: data = raw_line.strip ().split(';') entities.append ({' last_name ': data[0], 'name': data[1], 'surname': data[2]}) return render_template ('table.html', entities=entities) Код функции table

Изображение слайда
60

Слайд 60

{% extends 'base.html' %} {% block title %} Список пользователей{% endblock %} {% block content %} <table border="1" cellspacing ="0"> < tr > < th > Фамилия</ th > < th > Имя</ th > < th > Отчество</ th > </ tr > {% for item in entities %} < tr > <td>{{ item.last_name }}</td> <td>{{ item.name }}</td> <td>{{ item.surname }}</td> </ tr > {% endfor %} </table> {% endblock %}

Изображение слайда
61

Слайд 61: Динамический url

Изображение слайда
62

Слайд 62: Динамический url

slug https://rc-like.ru/ dji-spreading-wings-s900-kit http://www.pro-smm.com/ kak-polzovatsya-sniply / id https://habrahabr.ru/post/ 38434 / https://vk.com/id 17022311

Изображение слайда
63

Слайд 63

slug @ app.route ( "/users/<login>" ) id @ app.route ( "/users/< int:user_id >" ) slug @ app.route ( "/posts/<slug>" ) id @ app.route ( "/posts/< int:post_id >" )

Изображение слайда
64

Слайд 64

@ app.route ('/users/< username >') def show_user_profile ( username ): # показывает профиль пользователя return 'User %s' % username @ app.route ('/posts/< int: post_id >') def show_post ( post_id ): # показывает статью по её id ( int ) return 'Post %d' % post_id

Изображение слайда
65

Слайд 65

master129;Малахов;Арсений;Викторович;25/01/1993;+7(918)646-55-91 airfix;Мадатов;Василий;Евгеньевич;30/11/1995;+7(951)345-83-17 kr0ff;Малинин;Петр;Степанович;18/12/1996;+7(938)044-15-18 users.txt login;last_name;name;surname;birth_date;phone Логин Фамилия Имя Отчество Дата рождения Номер телефона master129 Малахов Арсений Викторович 25/01/1993 +7(918)646-55-91 airfix Мадатов Василий Евгеньевич 30/11/1995 +7(951)345-83-17 kr0ff Малинин Петр Степанович 18/12/1996 +7(938)044-15-18

Изображение слайда
66

Слайд 66: Задание

Создать страницу users_list : функцию users_list путь /users users_list.html, наследованный от base.html вернуть users_list.html Скопировать код чтения файла из table. Заменить humans.txt на users.txt Добавить элементы ( login, birth_date, phone )

Изображение слайда
67

Слайд 67

@ app.route ("/users") def users_list (): entities = list() with open('users.txt', encoding="utf-8") as f: for raw_line in f: data = raw_line.strip ().split(';') entities.append ({'login': data[0], ' last_name ': data[1], 'name': data[2], 'surname': data[3], ' birth_date ' : data[4], 'phone': data[5]}) return render_template ('users_list.html', entities=entities)

Изображение слайда
68

Слайд 68

{% extends 'base.html' %} {% block title %} Список пользователей{% endblock %} {% block content %} <table border="1" cellspacing ="0"> < tr > < th > Логин</ th > < th > Фамилия</ th > < th > Имя</ th > < th > Отчество</ th > < th > Дата рождения</ th > < th > Номер телефона</ th > </ tr > {% for item in entities %} < tr > <td><a href ="users/{{ item.login }}">{{ item.login }}</a></td> <td>{{ item.last_name }}</td> <td>{{ item.name }}</td> <td>{{ item.surname }}</td> <td>{{ item.birth_date }}</td> <td>{{ item.phone }}</td> </ tr > {% endfor %} </table> {% endblock %}

Изображение слайда
69

Слайд 69: Задание

Скопировать users_list в user_item : функцию user_item путь /users/<login> user_item.html, наследованный от base.html вернуть user_item.html + код чтения файла из users_list.

Изображение слайда
70

Слайд 70: Основные коды состояний

200 Ok (все норм) 403 Forbidden (доступ запрещен) 404 Not Found (не найден) 500 Server Error (ошибка сервера) http://ru.wikipedia.org/wiki/ Список_кодов_состояния _ HTTP

Изображение слайда
71

Слайд 71: Задание

Добавить к импорту abort from flask import Flask, render_template, abort Выбрать пользователя по login’ у Если такого login’ а нет, то вызвать abort(404) В шаблоне вывести данные о пользователе

Изображение слайда
72

Слайд 72

@ app.route ("/users/<login>") def user_info (login): item = None with open('users.txt', encoding="utf-8") as f: for raw_line in f: data = raw_line.strip ().split(';') if data[0] == login: item = {'login': data[0], ' last_name ': data[1], 'name': data[2], 'surname': data[3], ' birth_date ' : data[4], 'phone': data[5]} break if item is None: abort(404) return render_template ('user_info.html', item=item)

Изображение слайда
73

Слайд 73

{% extends 'base.html' %} {% block title %} Пользователь {{ item.login }}{% endblock %} {% block content %} <p><strong> Фамилия:</ strong> {{ item.last_name }}</p> <p><strong> Имя:</ strong> {{ item.name }}</p> <p><strong> Отчество:</ strong> {{ item.surname }}</p> <p><strong> Дата рождения:</ strong> {{ item.birth_date }}</p> <p><strong> Номер телефона:</ strong> {{ item.phone }}</p> {% endblock %}

Изображение слайда
74

Слайд 74

Изображение слайда
75

Слайд 75

Изображение слайда
76

Слайд 76

Изображение слайда
77

Последний слайд презентации: 21 занятие

Изображение слайда