Разделы презентаций


Основы web-технологий. Технологии создания web-сайтов

Содержание

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

Слайды и текст этой презентации

Слайд 1Основы web-технологий. Технологии создания web-сайтов.
Асирян Александр Вячеславович
ст. преподаватель кафедры АСУ
E-mail:

asiryan.a@mail.ru

Основы web-технологий. Технологии создания web-сайтов.Асирян Александр Вячеславовичст. преподаватель кафедры АСУE-mail: asiryan.a@mail.ru

Слайд 2Сеть Интернет
Интернет — всемирная система объединённых компьютерных сетей, обеспечивающих работу с

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

Сайты — это

набор текстовых файлов (гипертекстовых страниц), связанных между собой узлами перехода (гиперссылками для быстрого перехода на другие страницы).

Гипертекст - это текст, в котором содержаться ссылки на другие документы.
Сеть ИнтернетИнтернет — всемирная система объединённых компьютерных сетей, обеспечивающих работу с большим спектром ресурсов (сайты, электронная почта и

Слайд 4??
Веб-обозрева́тель, бра́узер (от англ. Web browser) — программное обеспечение для

просмотра веб-сайтов, то есть для запроса веб-страниц (преимущественно из Сети),

их обработки, вывода и перехода от одной страницы к другой.

Браузер

??Веб-обозрева́тель, бра́узер (от англ. Web browser) — программное обеспечение для просмотра веб-сайтов, то есть для запроса веб-страниц

Слайд 5Веб-страница
Веб-страница  — документ или информационный ресурс Всемирной паутины, доступ к

которому осуществляется с помощью веб-браузера.

Веб-страницы обычно создаются на языках разметки

HTML и могут содержать гиперссылки для быстрого перехода на другие страницы.

Информация на веб-странице может быть представлена в различных формах:
текст
статические и анимированные графические изображения
аудио
видео

Информационно значимое содержимое веб-страницы обычно называется контентом.

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

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

Слайд 6Клиент/сервер. HTTP-протокол
Основой HTTP является технология «клиент-сервер», то есть предполагается

существование потребителей (клиентов), которые инициируют соединение и посылают запрос, и

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

HTTP (англ. HyperText Transfer Protocol — «протокол передачи гипертекста») — протокол прикладного уровня передачи данных (изначально — в виде гипертекстовых документов).

Клиент/сервер. HTTP-протокол Основой HTTP является технология «клиент-сервер», то есть предполагается существование потребителей (клиентов), которые инициируют соединение и

Слайд 7Запрос происходит в несколько этапов:
DNS-запрос — поиск ближайшего DNS-сервера,

чтобы преобразовать URI (например, google.com) в его числовое представление —

IP-адрес (74.125.87.99, прим. — получено посредством команды ping). Это адрес и будет реальным адресом сайта в Интернет.
соединение — установка соединения с сервером по полученному IP-адресу;
отправка данных;
ожидание ответа — ждем пока пакеты данных дойдут до сервера, он их обработает и ответ вернется назад;
получение данных.
Это легко проследить если воспользоваться например, плагином для Firefox — Firebug или встроенными средствами для разработчика в Chrome.


На что тратит время HTTP запрос

Запрос происходит в несколько этапов: DNS-запрос — поиск ближайшего DNS-сервера, чтобы преобразовать URI (например, google.com) в его

Слайд 8Какие бывают Web-страницы?
статические – существуют на сервере в виде

готовых файлов: *.htm, *.html
динамические –

полностью или частично создаются на сервере в момент запроса (выбор информации из базы данных) *.shtml, *.asp, *.pl, *.php

позволяют выбирать информацию из базы данных по заранее неизвестным запросам

дополнительная нагрузка на сервер
загружаются медленнее

Какие бывают Web-страницы?статические – существуют на сервере в виде    готовых файлов:

Слайд 9Общее представление о языках гипертекстовой разметки HTML, XML, XHTML

ЭВОЛЮЦИЯ ЯЗЫКОВ РАЗМЕТКИ.
1986
ISO-8879
SGML
Декабрь 1997
HTML 4.0 + CSS 2.0
Январь 1997
HTML 3.2
Март

1995
HTML 3 + CSS

1994
HTML 2.0

1991
CERN HTML

24 декабря 1999
HTML 4.01

2000
XHTML 1.0

2014
HTML 5 + CSS 3

Общее представление о языках гипертекстовой разметки HTML, XML, XHTML   ЭВОЛЮЦИЯ ЯЗЫКОВ РАЗМЕТКИ.1986ISO-8879SGMLДекабрь 1997HTML 4.0 +

Слайд 10HTML (от англ. HyperText Markup Language — «язык разметки гипертекста»)
Основным форматом представления

документов в сети Интернет является язык гипертекстовой разметки HTML (стандартный

язык разметки документов во Всемирной паутине) .
HTML – это определенная совокупность правил (тегов), по которым оформляется документ. Теги показывают Интернет-браузеру, как следует отображать текст на Web-страничке.
Структура тега (пары тегов) всегда такова:
<название тега> …
Теги могут содержать атрибуты, характеризующие отображение информации внутри тега.
HTML  (от англ. HyperText Markup Language — «язык разметки гипертекста»)Основным форматом представления документов в сети Интернет является язык

Слайд 11XML и XHTML
XML (eXtensible Markup Language)
XML похож на язык HTML

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

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

XHTML (eXtensible HyperText Markup Language)
XHTML - это основанный на XML язык разметки гипертекста, максимально приближенный к стандартам HTML. XHTML отличается от HTML строгостью написания кода. Если HTML позволял писать практически любые конструкции и браузер их корректно распознавал, то теперь, с появлением XHTML, это стало невозможным. Строгие требования к оформлению XHTML-кода позволяют избежать многих ошибок ещё на стадии написания и отладки.

На данный момент используется HTML 5. он был создан как единый язык разметки, который мог бы сочетать синтаксические нормы HTML и XHTML.
XML и XHTMLXML (eXtensible Markup Language)XML похож на язык HTML тем, что для описания различных разделов документа

Слайд 12Тэги
Тэг – это команда языка HTML, которую выполняет браузер:
непарные

тэги


парные тэги (контейнеры)

вставить рисунок

...

открывающий
закрывающий
область

действия тэга: описание таблицы
Тэги Тэг – это команда языка HTML, которую выполняет браузер:непарные тэгипарные тэги (контейнеры)вставить рисунок ...открывающий закрывающий область

Слайд 13
HTML-код страницы помещается внутрь контейнера …

Заголовок Web-страницы заключается в контейнер …

Основное содержание страницы помещается в контейнер …
Название Web-страницы содержится в контейнере и выводится в строке заголовка браузера.

Структура Web-страницы

HTML-код страницы помещается внутрь контейнера …    Заголовок Web-страницы заключается в контейнер

Слайд 14Простейшая Web-страница


Моя первая
Web-страница


Привет!



first.html

Моя первая
Web-страница

шапка («голова»)



Привет!

основная часть («тело»)


Простейшая Web-страницаМоя первая  Web-страницаПривет! first.htmlМоя первая  Web-страницашапка («голова») Привет!основная часть («тело»)

Слайд 15http://www.trend-life.ru/obuch/html-1.php
http://sevidi.narod.ru/
Примеры уроков

http://www.trend-life.ru/obuch/html-1.phphttp://sevidi.narod.ru/Примеры уроков

Слайд 16Cоздание файла веб-страницы
Открыть Notepad++ и введите туда следующий текст:  Моя

первая веб-страничка

Здравствуйте, это моя первая страница.
Добро пожаловать!

:) Сохраним этот документ, присвоив ему имя *.html 
Cоздание файла веб-страницыОткрыть Notepad++ и введите туда следующий текст:      Моя первая веб-страничка

Слайд 17Сохранение
Выбрать в меню Файл - Сохранить как…, и сохранить файл

с расширение .html

СохранениеВыбрать в меню Файл - Сохранить как…, и сохранить файл с расширение .html

Слайд 18Web-страницы. Язык HTML
Тема 2. Оформление текста

Web-страницы. Язык HTMLТема 2. Оформление текста

Слайд 19Заголовки: H1 … H6

Заголовок документа
Заголовок раздела
Заголовок подраздела
Заголовок параграфа
Комментарий
Авторские пометки

выравнивание:
История
left,


center,
right

Заголовки: H1 … H6Заголовок документаЗаголовок разделаЗаголовок подразделаЗаголовок параграфаКомментарийАвторские пометкивыравнивание:Историяleft, center, right

Слайд 20Абзацы
переход на новую строку




абзац (с отступами)
И вечный бой! Покой
нам

только снится

Сквозь кровь и пыль...

Летит, летит степная
кобылица

И мнет ковыль...


Одно

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


До самого вечера тело с варежками ...


Абзацыпереход на новую строкуабзац (с отступами)И вечный бой! Покой нам только снитсяСквозь кровь и пыль...Летит, летит степная

Слайд 21Выравнивание

Этот текст выровнен по центру.


Этот текст выровнен по

ширине.
Этот текст выровнен по ширине.
Этот текст выровнен по ширине.
Этот текст

выровнен по ширине.


left по левой границе
right по правой границе
center по центру
justify по ширине

атрибут тэга


ВыравниваниеЭтот текст выровнен по центру.Этот текст выровнен по ширине.Этот текст выровнен по ширине.Этот текст выровнен по ширине.Этот

Слайд 22Физическая разметка

Физическая разметка

Слайд 23Специальные символы

Специальные символы

Слайд 24Web-страницы. Язык HTML
Тема 3. Оформление документа.

Web-страницы. Язык HTMLТема 3. Оформление документа.

Слайд 25Тэг BODY – общие свойства страницы
цвет фона и текста





цвет гиперссылок

TEXT="white" BGCOLOR=#00FF00>
Привет!


...

цвет текста
цвет

фона

посещенные ссылки
(visited link)

цвет ссылок

атрибуты тэга

Тэг BODY – общие свойства страницыцвет фона и текстацвет гиперссылокПривет!...цвет текста цвет фона посещенные ссылки(visited link) цвет

Слайд 26Цвет гиперссылок

...

LINK

ссылки, на которых не были
VLINK посещенные ссылки
ALINK активные

ссылки
Цвет гиперссылок...LINK	  ссылки, на которых не былиVLINK	  посещенные ссылкиALINK	  активные ссылки

Слайд 27Тэг FONT – свойства блока текста
цвет текста




размер шрифта
Привет!

Как дела?

Привет!

COLOR=red
SIZE=6>
Как дела?

от 1 до 7
(3 – нормальный)


Тэг FONT – свойства блока текстацвет текстаразмер шрифтаПривет!Как дела?Привет!Как дела?от 1 до 7(3 – нормальный)

Слайд 28Линия-разделитель


horizontal rule
ширина в пикселях или процентах
толщина
выравнивание

Линия-разделительhorizontal rule ширина в пикселях или процентахтолщинавыравнивание

Слайд 29Кодирование цвета
имена
red, green, blue, magenta, black,
шестнадцатеричные коды
white
R
G
B
# F

F 0 0 0 0

# F F F F F

F


# 0 0 F F F F


# 0 0 0 0 0 0


# A A A A A A


Кодирование цветаимена red, green, blue, magenta, black, шестнадцатеричные кодыwhiteRGB# F F 0 0 0 0# F F

Слайд 30Web-страницы. Язык HTML
Тема 4. Рисунки

Web-страницы. Язык HTMLТема 4. Рисунки

Слайд 31Форматы рисунков
GIF (Graphic Interchange Format)
сжатие без потерь
прозрачные области
анимация
только с палитрой

(2…256 цветов)
рисунки с четкими границами, мелкие рисунки
JPEG (Joint Photographer Expert

Group)
сжатие с потерями
только True Color (16,7 млн. цветов)
нет анимации и прозрачности
рисунки с размытыми границами, фото

PNG (Portable Network Graphic)
сжатие без потерь
с палитрой (PNG-8) и True Color (PNG-24)
прозрачность и полупрозрачность (альфа-канал)
нет анимации
плохо сжимает мелкие рисунки

Форматы рисунковGIF (Graphic Interchange Format)сжатие без потерьпрозрачные областианимациятолько с палитрой (2…256 цветов)рисунки с четкими границами, мелкие рисункиJPEG

Слайд 32Выравнивание

left
right
top
bottom
(по умолчанию)
middle

Выравнивание leftrighttopbottom(по умолчанию)middle

Слайд 34Рисунки в документе




из той же папки:
из другой папки:
с другого сервера:
image (изображение)
source (источник)

Рисунки в документе  из той же папки:из другой папки:с другого сервера:image (изображение) source (источник)

Слайд 35Отступы

ALIGN="left" HSPACE=10 VSPACE=10>
VSPACE
(vertical space)
HSPACE
(horizontal

space)



Отступы VSPACE(vertical space)HSPACE(horizontal space)

Слайд 36Другие атрибуты

всплывающая

подсказка
надпись на месте рисунка, если его нет
размеры позволяют:
растянуть - сжать
не

портить дизайн, если рисунка нет

толщина рамки вокруг рисунка

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

Слайд 37Рисунок-гиперссылка



SRC="tbl.jpg" ALT="Таблицы" BORDER=0>

локальная ссылка:
ссылка на другой сервер:
иначе будет синяя рамка

вокруг

если не вплотную к , будет «хвост»


не будет «хвоста»


Рисунок-гиперссылкалокальная ссылка:ссылка на другой сервер:иначе будет синяя рамка вокругесли не вплотную к , будет «хвост»не будет «хвоста»

Слайд 38Web-страницы. Язык HTML
Тема 5. Гиперссылки

Web-страницы. Язык HTMLТема 5. Гиперссылки

Слайд 39Ссылки на другие страницы сайта
Таблицы
страница в той же папке
anchor

(якорь)
hyper reference (гиперссылка)
страница во вложенной папке
Пример
страница в

соседней папке

Текст

выйти из текущей папки

Ссылки на другие страницы сайтаТаблицыстраница в той же папкеanchor (якорь) hyper reference (гиперссылка) страница во вложенной папкеПримерстраница

Слайд 40Примеры (ссылки из файла rock.html)



Примеры (ссылки из файла rock.html)

Слайд 41Ссылки на другие сайты
Почта
на главную страницу сайта
index.htm, index.html, default.asp,


на конкретную страницу сайта (URL)

Васин текст
на файл для скачивания

HREF="http://www.vasya.ru/prog.zip">
Скачать
Ссылки на другие сайтыПочтана главную страницу сайтаindex.htm, index.html, default.asp, …на конкретную страницу сайта (URL)Васин текстна файл для

Слайд 42Ссылки внутри страницы

Глава 1

Глава 2


Глава 1
Это

текст главы 1. Это текст главы 1.
Это текст главы 1.

Это текст главы 1.

Наверх

Глава 2


Это текст главы 2. Это текст главы 2.
Это текст главы 2. Это текст главы 2.

Наверх





метка (якорь)

переход на метку

Ссылки внутри страницыГлава 1Глава 2Глава 1Это текст главы 1. Это текст главы 1.Это текст главы 1. Это

Слайд 43Запуск почтовой программы

Напишите мне!


Запуск почтовой программыНапишите мне!

Слайд 44Web-страницы. Язык HTML
Тема 6. Этапы создания
современного сайта

Web-страницы. Язык HTMLТема 6. Этапы создания современного сайта

Слайд 45Работу по созданию можно разделить на такие этапы:

- Подготовительный; -

Разработка макета; - Верстка; - Программирование; - Наполнение контентом; - Раскрутка сайта; - Администрирование (поддержка)

сайта.

Этапы создания сайта

Работу по созданию можно разделить на такие этапы: - Подготовительный; - Разработка макета; - Верстка; - Программирование;

Слайд 461. Подготовительный этап
Создание любого сайта должно начинаться с составления его структуры (карты

сайта), тематики, цель сайта и аудитория (пол, возраст) и т.д.



Пример такой структуры может выглядеть так:
- Главная
- О компании    - История    - Миссия
- Товары    - Автомобили        - Легковые        - Внедорожники    - Мотоциклы    - Велосипеды
- Контакты
1. Подготовительный этапСоздание любого сайта должно начинаться с составления его структуры (карты сайта), тематики, цель сайта и аудитория (пол,

Слайд 472. Разработка макета
Разработка макета - расположение основных значимых элементов (блоков)

на каждой странице (каркас).

Разработка дизайна – отрисовка сайта в

графическом редакторе

С помощью языка HTML создаём структуру сайта с использованием блоков и придание им стиля с помощью CSS.
2. Разработка макетаРазработка макета - расположение основных значимых элементов (блоков) на каждой странице (каркас). Разработка дизайна –

Слайд 48Пример созданного макета в Photoshop

Пример созданного макета в Photoshop

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

выглядят почти одинаково. Недостатки: индексация такого сайта очень медленная, долго

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

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

3. Верстка. Виды вёрстки при создании сайтов

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

Слайд 50Табличная верстка
Схема табличного дизайна:

Заголовок сайта
Набор гиперссылок Содержимое сайта


Сведения о правах разработчика

Табличная верстка Схема табличного дизайна: Заголовок сайта Набор гиперссылок Содержимое сайта  Сведения о правах разработчика

Слайд 51Блочная верстка
Создаем простейший макет сайта на основе блочной верстки.


Элемент является блочным элементом

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

Слайд 52Шапка(header) Левая колонка(left) Содержание страницы(content) Подвал(footer)
Блоки верстка с


#header { width:1000px;
height:217px;
background: red;
}
#left { width:200px;
height:100%;
float:left;
background: blue;
}
#content { height:100%;

width:100%;
background: green;
}
#footer { width:1000px;
background: yellow;
}

В HTML файле разбиение на блоки

В CSS файле придание стиля

Блоки верстка с


Шапка(header) Левая колонка(left)  Содержание страницы(content) Подвал(footer)Блоки верстка с #header { width:1000px;	 height:217px;	 background: red;}#left {	width:200px;	height:100%;	float:left;	background: blue;}#content

Слайд 53Web-страницы. Cascading Style Sheets (СSS)

Web-страницы. Cascading Style Sheets (СSS)

Слайд 54CSS (Cascading Style Sheets)
Каскадные таблицы стилей преимущественно используется как

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

со стилем:

.....


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

предоставляет большую гибкость и возможность управления его представлением

разделение описания логической структуры веб-страницы (которое производится с помощью HTML или других языков разметки) от описания внешнего вида этой веб-страницы (которое теперь производится с помощью формального языка CSS)

CSS (Cascading Style Sheets) Каскадные таблицы стилей преимущественно используется как средство описания, оформления внешнего вида веб-страниц, написанных с

Слайд 55
Синтаксис CSS состоит из трех частей: селектора, свойства и значения:
Синтаксис

CSS
Синтаксис:

селектор {
свойство: значение;
свойство: значение;
свойство: значение;
}
Селекторы

правила CSS могут быть

селекторами элементов (a, p..)
p { font-family: Garamond, serif; }

селекторами классов (class)
.note { color: red;
background: yellow;
font-weight: bold; }

селекторами идентификаторов (id)
#paragraph1 {
margin: 0;
width:100px;}

селекторами псевдоклассов (a:hover…)
a:active {
color:yellow;
}

Синтаксис CSS

Синтаксис CSS состоит из трех частей: селектора, свойства и значения:Синтаксис CSSСинтаксис:селектор { свойство: значение; свойство: значение; свойство:

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

Селекторы элементов

Слайд 57Селекторы классов и идентификаторов










Кофе — напиток, изготавливаемый из

жареных зёрен кофейного дерева. Благодаря содержанию кофеина

оказывает стимулирующее действие.


До XIV века кофе произрастал в Эфиопии в диком виде.


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


Посмотрим на фрагмент HTML-документа

В CSS

#content {
width: 800px;
background: #ccc;
font-size: 14pt}

#select {
width: 800px;
font-size: 20pt;
color: blue; }

.default {
width: 800px;
font-size: 14pt;
}

Селекторы классов и идентификаторов		Кофе — напиток, изготавливаемый из жареных зёрен  кофейного   дерева. Благодаря содержанию

Слайд 58Основные свойста CSS
width:1000px; // задает ширину элемента (можно в px,%)
height:217px;

// задает высоту элемента
background: red; // задает цвет фона
background: url(‘image.jpg’);

// задает фоновое изображение
text-align: center; // задает выравнивание текста
float:left; // задает положение блока
слева
a:hover // изменяет стильссылки при наведение курсора
a:visited // изменяет стиль посещенной ссылки

margin: 0 auto; // задает отступ сверху/снизу справа/слева
padding: 20px 20px; // задает отступ внутри блока

Остальные свойства можно посмотреть на сайтах:
http://css.manual.ru
https://webref.ru/https://webref.ru/ (http://htmlbook.ru)

Основные свойста CSSwidth:1000px; // задает ширину элемента (можно в px,%)height:217px; // задает высоту элементаbackground: red; // задает

Слайд 59CSS 3. Новые возможности
Прозрачность/Opacity
В браузерах, поддерживающих это свойство, указать

прозрачность можно так:

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



Указание

нескольких фоновых картинок/Multiple Backgrounds
Новая версия CSS позволяет добавлять элементам несколько фоновых картинок. Можно разместить изображения вверху, в центре, в углу и в других местах. Верстать сложные макеты станет намного проще.

Вот пример установки нескольких картинок для фона:

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




background-color: rgb(0,0,255);
opacity: 0.5;

background: url(body-top.gif) top left no-repeat, url(banner_fresco.jpg) top 11px no-repeat, url(body-bottom.gif) bottom left no-repeat, url(body-middle.gif) left repeat-y;

CSS 3. Новые возможности Прозрачность/OpacityВ браузерах, поддерживающих это свойство, указать прозрачность можно так:В файле стилей нужному селектору

Слайд 60CSS 3. Новые возможности
Пользовательское изменение размера/Resize
Средствами новой версии CSS

можно добавить немного интерактивности на ваш сайт - свойство resize

позволит посетителю изменять размер элементов:


Закругленные углы/border-radius
С помощью этого свойства возможно делать закругленные углы у блоков. Допустимо указывать радиус закругления для каждого угла в отдельности.



Границы могут быть не только идеально круглыми - можно указывать два радиуса кривизны:





div.resize { width: 100px; height: 100px; resize: both; overflow: auto; }


#elem { border-top-left-radius: 1em; border-top-right-radius: 2em; border-bottom-right-radius: 3em; border-bottom-left-radius: 4em; }


border-radius: 55pt 25pt;

CSS 3. Новые возможности Пользовательское изменение размера/ResizeСредствами новой версии CSS можно добавить немного интерактивности на ваш сайт

Слайд 61CSS 3. Новые возможности
Тень блока/box-shadow
Абсолютно новое свойство, позволяющее показать

бокс с тенью. Его формат таков:



Результат можно увидеть на картинке:

Текст

с тенью/text-shadow
Это свойство не совсем новое, оно присутствовало и в CSS2, однако поддерживают его пока только браузеры Opera 9.5, Safari 3, Konqueror и iCab. Если ИЕ8 и Firefox 3 не отстанут, применять Photoshop для того, чтобы сделать простую тень, станет не нужно.

Пример использования text-shadow:






Добавление простой анимации

Подробно ознакомиться можно здесь: http://alt-f4.ru/article/new-in-css3


span { box-shadow: 0.2em 0.2em 5px #CCC; }


color: #fff; background-color: #fff; text-shadow: 2px 2px 2px #000;

CSS 3. Новые возможности Тень блока/box-shadowАбсолютно новое свойство, позволяющее показать бокс с тенью. Его формат таков:Результат можно

Слайд 62Web-страницы. JavaScript

Web-страницы. JavaScript

Слайд 63Немного о JavaScript
Язык JavaScript предоставляет средства для решения многих задач

в документе HTML без необходимости взаимодействия с сервером.

Наиболее широкое

применение находит в браузерах как язык сценариев для придания интерактивности веб-страницам.

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

Вставка кода в HTML-документ в контейнерах

Немного о JavaScript

Немного о JavaScriptЯзык JavaScript предоставляет средства для решения многих задач в документе HTML без необходимости взаимодействия с

Слайд 64Объектная модель DOM
В javascript страница представлена в виде объектной модели

DOM (Document Object Model).
Согласно DOM-модели, документ является иерархией. Каждый HTML-тег

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

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

Объектная модель DOM

Объектная модель DOMВ javascript страница представлена в виде объектной модели DOM (Document Object Model). Согласно DOM-модели, документ

Слайд 65Простейший DOM
Самый внешний тег - , поэтому дерево начинает расти от

него.
Внутри  находятся два узла:  и  - они становятся дочерними узлами для .
Теги образуют узлы-элементы (element node).

Текст представлен текстовыми узлами(text node). И то и другое - равноправные узлы дерева DOM.

Простейший DOM

Простейший DOM

Простейший DOMСамый внешний тег - , поэтому дерево начинает расти от него.Внутри  находятся два узла:  и  - они становятся дочерними узлами

Слайд 66Обращение к элементам DOM
Стандарт DOM предусматривает несколько средств поиска элемента.



Это методы: getElementById, getElementsByTagName 
и getElementsByName.
Самый удобный способ найти элемент в DOM

- это получить его по id. Для этого используется вызов document.getElementById(id)

Например, следующий код изменит цвет текста на голубой в div'е c id="dataKeeper":

document.getElementById('dataKeeper').style.color = 'blue'

Обращение к элементам DOM

Обращение к элементам DOMСтандарт DOM предусматривает несколько средств поиска элемента. Это методы: getElementById, getElementsByTagName и getElementsByName. Самый удобный способ найти

Слайд 67Обращение к элементам DOM
Следующий способ - это получить все элементы

с определенным тегом, и среди них искать нужный. Для этого

служит document.getElementsByTagName(tag).

Она возвращает массив из элементов, имеющих такой тег.
Например, можно получить второй элемент(нумерация в массиве идет с нуля) с тэгом li:

getElementsByTagName можно вызывать не только для document, но и вообще для любого элемента, у которого есть тег (не текстового).
При этом будут найдены только те объекты, которые находятся под этим элементом.
Например, следующий вызов получает список элементов LI, находящихся внутри первого тега div:

document.getElementsByTagName('DIV')[0].getElementsByTagName('LI')

Обращение к элементам DOMСледующий способ - это получить все элементы с определенным тегом, и среди них искать

Слайд 68Возможности, которые даёт DOM
Каждый DOM-элемент является объектом и предоставляет свойства

для манипуляции своим содержимым, для доступа к родителям и потомкам.


Пример создания раскрывающего меню:


Возможности, которые даёт DOM

Возможности, которые даёт DOMКаждый DOM-элемент является объектом и предоставляет свойства для манипуляции своим содержимым, для доступа к

Слайд 69Вставить код JavaScript на страницу

function openMenu(node){
var subMenu = node.parentNode.getElementsByTagName("ul")[0];
subMenu.style.display ==

"none" ? subMenu.style.display = "block" : subMenu.style.display = "none";
}

Вставляем следующую

функцию JavaScript в любом месте веб-страницы с меню:

Вставить код JavaScript на страницу

Вставить код JavaScript на страницуfunction openMenu(node){	var subMenu = node.parentNode.getElementsByTagName(

Слайд 70Результат
При нажатии:

РезультатПри нажатии:

Слайд 71jQuery
jQuery — библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML.

Библиотека jQuery помогает легко получать доступ к любому элементу DOM,

обращаться к атрибутам и содержимому элементов DOM, манипулировать ими.
jQueryjQuery — библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML. Библиотека jQuery помогает легко получать доступ к

Слайд 72jQuery. Подключение
Подключить jQuery можно двумя способами:

1.Загрузка и подключение

Загружать jQuery желательно

с http://jquery.com/download/. Чтобы закачать файлы по этим ссылкам, нужно кликнуть

по ним правой клавишей и выбрать "Сохранить ссылку как".

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

jQuery. ПодключениеПодключить jQuery можно двумя способами:1.Загрузка и подключениеЗагружать jQuery желательно с http://jquery.com/download/. Чтобы закачать файлы по этим

Слайд 73jQuery. Подключение
2. Подключение jQuery с CDN (не закачивая библиотеку на

сервер)
Существуют несколько таких хранилищ, наиболее известные и надежные из них


Google CDN (https://developers.google.com/speed/libraries/?hl=ru-RU&csw=1#jquery),
Microsoft CDN (http://www.asp.net/ajax/cdn),
CDN который организовали создатели jQuery(http://code.jquery.com).

Подключить jQuery с CDN не сложнее, чем со своего сервера — необходимо просто прописать соответствующий путь до него. Вот например как подключается библиотека с официального CDN jQuery:
jQuery. Подключение2. Подключение jQuery с CDN (не закачивая библиотеку на сервер)Существуют несколько таких хранилищ, наиболее известные и

Слайд 74jQuery. Пример(слайдер)
jQuery можно использовать для различных задач.
Разберем например слайдер и

галерею изображений.

Разберем самый простой слайдер, который можно взять здесь:

https://github.com/k-ivan/jQuery-simple-slider/archive/master.zip

Скачаем файлы слайдера и распакуем их на сервер.
Подключим файл стиля слайдера slider.css (в нем можно менять
стиль слайдера), библиотеки jQuery и самого слайдера

Внутри тега head прописываем






jQuery. Пример(слайдер)jQuery можно использовать для различных задач.Разберем например слайдер и галерею изображений. Разберем самый простой слайдер, который

Слайд 75jQuery. Пример(слайдер)
Добавляем на страницу следующий код





Текст 1Далее



текст 2



Текст 3





jQuery. Пример(слайдер)Добавляем на страницу следующий код         Текст 1Далее

Слайд 76jQuery. Пример(слайдер)

Как изменять слайдер:

Чтобы добавить(удалить) страничку слайдера добавляем(удаляем) элемент



class="caption">Текст 1Далее



2) Изменение картинки :
В теге Img в атрибуте src указываем ссылку на нужное изображение.

3)Изменение текста на слайде
В теге span (текст 2) меняем текст на нужный.


jQuery. Пример(слайдер)Как изменять слайдер:Чтобы добавить(удалить) страничку слайдера добавляем(удаляем) элемент       Текст 1Далее

Слайд 77jQuery. Пример(слайдер)
Вставляем Инициализацию плагина

1. Без параметров
$(".slider-container").sliderUi();

2. C расширенными

параметрами


$(".slider-container").sliderUi({
speed: 500,
cssEasing: "ease-in-out" //описание easing для css анимации
});


Список параметров, которые

можно изменять:
controlShow: true, // показывать навигацию внизу
arrowsShow: true, // показывать вперед|назад навигацию
autoPlay: true, // автоматическое перелистывание изображений
delay: 3000, // задержка перед перелистыванием
caption: false, // показывать описание
speed: 300, // скорость анимации
cssEasing: "ease-out" // функция плавности анимации с помощью CSS

jQuery. Пример(слайдер)Вставляем Инициализацию плагина1. Без параметров $(

Слайд 78jQuery. Пример(слайдер)

Результат:

jQuery. Пример(слайдер)Результат:

Слайд 79jQuery. Пример(галерея изображений)


Использование jQuery для создания галереи изображений
Галерея Funcy Box

(подробную инструкцию по установке плагина и исходники можно найти здесь

http://ruseller.com/lessons.php?id=238&rub32)

Общий вид

При нажатии
на картинку

jQuery. Пример(галерея изображений)Использование jQuery для создания галереи изображенийГалерея Funcy Box (подробную инструкцию по установке плагина и исходники

Слайд 80jQuery UI.


jQuery UI (User intarface)— библиотека JavaScript с открытым

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

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

jQuery UI. jQuery UI (User intarface)— библиотека JavaScript с открытым исходным кодом для создания насыщенного пользовательского интерфейса

Слайд 81jQuery UI. Datapicker


Datepicker — виджет для выбора даты или диапазона

дат





jQuery UI Datepicker - Default functionality

href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">






Date:





jQuery UI. Datapicker Datepicker — виджет для выбора даты или диапазона датjQuery UI Datepicker - Default functionality$(function() {$(

Слайд 82jQuery UI. Tabs
Tabs — вкладки

jQuery UI. Tabs Tabs — вкладки

Слайд 83jQuery UI. Tabs




jQuery UI Tabs -

Default functionality





$(function() {
$( "#tabs"

).tabs();
});






ест первой вкладки




Текст 2 вкладки.




Текст 3 вкладки







jQuery UI. Tabs jQuery UI Tabs - Default functionality$(function() {$(

Слайд 84jQuery UI. Accordion
Accordion — виджет «Аккордеон»

jQuery UI. AccordionAccordion — виджет «Аккордеон»

Слайд 85jQuery UI. Accordion




jQuery UI Accordion - Default

functionality





$(function() {
$( "#accordion" ).accordion();
});



id="accordion">

Секция 1




текст



Секция 2




текст








jQuery UI. AccordionjQuery UI Accordion - Default functionality$(function() {$(

Слайд 86Landing Page
LANDING PAGE - веб-страница, построенная определенным образом, основной задачей

которой является сбор контактных данных целевой аудитории.

Landing Page также часто

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

Особенности Landing Page:

только одна, хорошо запланированная цель: покупка товара, заполнение формы, скачивание ссылка.
призыв к действию (call to action), напр. Заполнить форму, Купить
простой дизайн
короткие и связные тексты, написанные на языке выгоды, отстуствие отвлекающих элементов
отсутствие классического меню.


Landing PageLANDING PAGE - веб-страница, построенная определенным образом, основной задачей которой является сбор контактных данных целевой аудитории.Landing

Слайд 87Landing Page. Шаблон


Landing Page. Шаблон

Слайд 88Landing Page. Пример


Landing Page. Пример

Слайд 89Landing Page. Перемещение по странице
Когда на странице сайта расположено большое

количество контента пользователь ознакомившись с ним и промотав страницу до

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

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

Слайд 90Landing Page. Кнопка наверх с помощью jQuery
Кнопка реализована достаточно просто.

Для ее функционирования понадобится библиотека jQuery, небольшой скрипт содержащий события jQuery,

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


 


Landing Page. Кнопка наверх с помощью jQuery	Кнопка реализована достаточно просто. Для ее функционирования понадобится библиотека jQuery, небольшой

Слайд 91Landing Page. Кнопка наверх.
Чтобы придать красивый внешний вид кнопке

необходимо добавить следующие стили. Их лучше всего добавить в файл

стилей вашего сайта.

#toTop {
width:100px;
border:1px solid #ccc;
background:#f7f7f7;
text-align:center;
padding:5px;
position:fixed;
bottom:10px; /* отступ кнопки от нижнего края страницы*/
right:10px;
cursor:pointer;
display:none;
color:#333;
font-family:verdana;
font-size:11px;
}

Для вызова кнопки добавьте следующий HTML код перед тегом .

^ Наверх

Landing Page. Кнопка наверх.	 Чтобы придать красивый внешний вид кнопке необходимо добавить следующие стили. Их лучше всего

Слайд 92Web-страницы. PHP+MySQL

Web-страницы. PHP+MySQL

Слайд 93Обработка событий
Динамика на веб-страницах реализована при помощи скриптов, которые выполняются на

сервере. 
Работает это следующим образом:

1. Браузер запрашивает у сервера документ;
2. Сервер

определяет, что документ является скриптом и запускает его на выполнение;
3. Скрипт выполняется (генерирует html страницу);
4. Сервер отправляет сгенерированную страницу браузеру.

Существует несколько языков программирования, на которых могут писать скрипты, которые генерируют "динамические" страницы. Самые распространенные из них:

Perl SSI PHP ASP Python Java

Обработка событийДинамика на веб-страницах реализована при помощи скриптов, которые выполняются на сервере. Работает это следующим образом:1. Браузер запрашивает у

Слайд 94Схема работы без и с PHP
Статические HTML-страницы
Динамические страницы (с

PHP кодом)

Схема работы без и с PHP Статические HTML-страницыДинамические страницы (с PHP кодом)

Слайд 95РНР выполняется на сервере. Браузер посылает серверу запрос на страницу

с php кодом. Сервер отдает эту страницу на исполнение интерпретатору

PHP, интерпретатор генерирует HTML код, отдает серверу, а сервер посылает клиенту.

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


либо

// - не выполняются команды от данных символов до конца строки;  /* комментарий */ - не воспринимаются команды между данными символами независимо от количества строк комментария;

Основы PHP

Основы PHP

Основы PHP

РНР выполняется на сервере. Браузер посылает серверу запрос на страницу с php кодом. Сервер отдает эту страницу

Слайд 96Что необходимо
Apache HTTP-сервер 
необходим для обработки запросов от браузера и

передачи на исполнение php-скриптов (т.к. браузер не выполняет php-скрипт).
Интерпретатор

PHP
выполнение php-скрипта
MySQL (необязательно)
если собираемся использовать Базу данных (или можно сохранять данные в файл)

!Чтобы не устанавливать всё отдельно можно воспользоваться Джентльменским набором Web-разработчика
(«Д.н.w.р», читается «Денвер»)
www.denwer.ru

Что необходимо

Что необходимо Apache HTTP-сервер необходим для обработки запросов от браузера и передачи на исполнение php-скриптов (т.к. браузер не

Слайд 97Денвер
Локальный сервер (Apache, PHP, MySQL, Perl и т.д.) и

программная оболочка, используемые Web-разработчиками для разработки сайтов на «домашней» (локальной)

Windows-машине без необходимости выхода в Интернет.

По умолчанию Денвер устанавливается в папку С:/WebServers

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

Например, если доменное имя praktika.ru, то С:/WebServers/home/praktika.ru/www

Денвер

Далее скопировать все ваши файлы с эту папку, переименовать главный файл в index.html и запустить Денвер (файл Run.exe в папке denwer)

Денвер Локальный сервер (Apache, PHP, MySQL, Perl и т.д.) и программная оболочка, используемые Web-разработчиками для разработки сайтов

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

обработку PHP-кода, необходимо использовать следующий синтаксис при добавлении PHP в

HTML-документ:



Открытие блока PHP-кода обозначается как "".
Теперь попробуйте вставить в любое место код следующим образом:

PHP в действии"; ?>

А потом можете просмотреть в браузере исходный текст полученной страницы. Никаких тегов PHP там нет! Только текст Это PHP в действии.

Потому, что PHP исполняется на сервере!

PHP в действии

Затем открываем браузер и переходим по адресу praktika.ru. Должен открыться Ваш сайт (т.к. этот запрос обрабатывает Денвер)
Пока вы увидите просто ваши HTML-страницы

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

Слайд 99Форма — это инструмент, с помощью которого HTML-документ может послать

некоторую информацию скрипту, где информация будет некоторым образом обработана.
Форма

HTML

Форма открывается тэгом

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


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

Слайд 100! В свойстве action тега Form указывается файл скрипта имя_файла.php
И так создадим простейшую форму:

name="form1" method="post" action="test.php"> (начало формы) Имя:

(поле имени)

Ваш Email:

Сообщение
(поле сообщения)

(кнопка отправки)

(конец формы)

Пример формы

! В свойстве action тега Form указывается файл скрипта имя_файла.phpИ так создадим простейшую форму: (начало формы)   Имя: (поле имени)

Слайд 101Передача данных на сервер
Тэг , имеющий парный завершающий тэг ,

собственно и задает форму. Его атрибуты - оба необязательные:

action - указывает URL (полный или относительный), на который будет отправлена форма. Отправка формы - это такой же запрос к серверу, как и все остальные (как я уже описал выше). Если этот атрибут не указать - форма отправляется на текущий документ, то есть "сама на себя".
method - способ отправки формы. Их два:

GET - отправка данных формы в адресной строке. Вы могли заметить на различных сайтах присутствие в конце URL символа "?" и следующих за ним данных в формате параметр=значение. Здесь "параметр" соответствует значению атрибута name элементов формы (см. ниже про тэг ).

POST - данные формы отправляются в теле запроса. Если не совсем понятно (или совсем непонятно), что это такое - не беспокойтесь, скоро мы к этому вопросу вернемся.

Передача данных на серверТэг , имеющий парный завершающий тэг , собственно и задает форму. Его атрибуты -

Слайд 102Передача данных методом GET
GET - это название запроса который отправляется

на сервер скрипту с помощью браузера открыто, через URL, адресную

строку. 
Если в адресной строке вы увидели знак амперсанды (&) и знак вопрос (?), можно считать, что этот узел работает на PHP, и ему в данный момент отправлены переменные и их значения.
Выглядеть это может примерно так:
http://lphp.ru/index.php?page=4&id_artpage=43

http:// - префикс основного протокола передачи данных в web (HTTP)
lphp.ru - домен в котором находится сервер
index.php - имя файла, который будет обрабатывать запрос, то есть кому собственно отправлен GET-запрос
? - разделитель, после которого перечисляются переменные со значениями, которые нужны скрипту обработчику для формирования ответной страницы
page - переменная или имя переменной
= - оператор присваивает значения переменной
4 - значение переменной
& - разделитель в строке запроса, между парами (переменная=значение&переменная=значение) и т.д.

Передача данных методом GET

Передача данных методом GETGET - это название запроса который отправляется на сервер скрипту с помощью браузера открыто,

Слайд 103Передача данных методом POST
Главное отличия метода POST от метода GET это

то, что он скрывает все передаваемые им переменные и их значения,

в своём теле.

При передачи методом POST значения помещаются на сервере в глобальный массив $_POST[‘имя элемента’].

При передачи методом GET в глобальный массив $_GET[‘имя элемента’].

где имя элемента указано в атрибуте name
соответствующего элемента формы,
например,


или

Передача данных методом POSTГлавное отличия метода POST от метода GET это то, что он скрывает все передаваемые им переменные

Слайд 104Передача значений
$_POST[‘sirname’]
$_POST[‘email’]
$_POST[‘message’]



Передача значений

Передача значений$_POST[‘sirname’]$_POST[‘email’]$_POST[‘message’]Передача значений

Слайд 105Немного о языке PHP
echo - выводит одну или более строк
$имя_переменной

= значение; //определение переменной

Примеры использования echo


Немного о языке PHPecho - выводит одну или более строк$имя_переменной = значение; //определение переменнойПримеры использования echo

Слайд 106Обработка переданных значений
А теперь – создаем файл test.php и пишем

скрипт:





Заполняем

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

Обработка переданных значений

Обработка переданных значенийА теперь – создаем файл test.php и пишем скрипт: Заполняем форму и смотрим результат.Должны вывестись

Слайд 107Хранение данных


Хранилище обработанных данных
Текстовый файл
(.txt)
База данных
(MySQL)
простота использования
не зависит

от подключения к базе данных
ограниченный функционал
больше

возможностей
хранение больших данных
возможность сортировки

нагрузка на сервер

Хранение данныхХранилище обработанных данныхТекстовый файл(.txt)База данных(MySQL) простота использования не зависит от подключения к базе данных ограниченный функционал

Слайд 108Запись в файл на php

*/
$sirname = $_POST["sirname"];
$email = $_POST["email"];
$text_message =

$_POST["message"];
// Открываем файл для записи
$file = fopen ("base.txt","a+");
if ( !$file )
{
echo("Ошибка открытия файла");
}
else
{
fputs ( $file, $sirname.“\r\n"); // Запись имени в файл
fputs ( $file, $email.“\r\n"); // Запись еmail в файл
fputs ( $file, $text_message.“\r\n"); // Запись текста сообщения в файл
fputs ( $file, $text_message.“\r\n");
}
fclose ($file);
header("Location: ".$_SERVER["HTTP_REFERER"]); // Делаем редирект обратно
?>
Запись в файл на php

Слайд 109Чтение из файла на php

= fopen("base.txt","r"); // Открываем файл для чтения
while ($i

{
echo("Ошибка открытия файла");
}
else
{
$buff = fgets ($file); // Чтение одной строки из файла base.txt
print $buff;
print "
";
}
$i++;
}
fclose($file);
?>
Чтение из файла на php

Слайд 110Использование БД Mysql
1. Создаём базу данных с использованием утилиты phpmyadmin

(набираем в браузере localhost и выбираем phpmyadmin)

Использование БД Mysql1. Создаём базу данных с использованием утилиты phpmyadmin (набираем в браузере localhost и выбираем phpmyadmin)

Слайд 111Использование БД Mysql
2. В созданной базе данных создаём таблицу (для

этого нужно указать имя таблицы, количество полей(столбцов) и тип каждого

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

Слайд 112Использование БД Mysql
3. Подключаемся к базе данных в php файле:


$db=mysql_connect("localhost", "root","");
mysql_select_db("praktika", $db);
?>
4. Записываем данные, введённые в форму
5.

Отображаем (выбираем) данные из базы данных
Использование БД Mysql3. Подключаемся к базе данных в php файле:4. Записываем данные, введённые в форму5. Отображаем (выбираем)

Слайд 113Как записать данные в MySQL
Структурированный язык запросов (Structured Query Language)

– сокращённо SQL:

Есть четыре основных типа запросов данных в SQL:

SELECT

– выбрать строки из таблиц;
INSERT – добавить строки в таблицу;
UPDATE – изменить строки в таблице;
DELETE – удалить строки в таблице;

Использование запроса SELECT для выборки нужных данных
SELECT column1, column2 FROM table_name;

Использование запроса INSERT для вставки новых данных
INSERT INTO table_name (column1, column2, column3) VALUES (‘data1’, ‘data2’, ‘data3’);

Как записать данные в MySQLСтруктурированный язык запросов (Structured Query Language) – сокращённо SQL:Есть четыре основных типа запросов

Слайд 114Как записать данные в MySQL

$name = $_POST["sirname"];
$email = $_POST["email"];
$text_message = $_POST["message"];

/*

Подключаемся к базе данных */
$db=mysql_connect("localhost", "root","");
mysql_select_db("praktika", $db);


/* Записывает данные */
$sql = "INSERT INTO message(name, email, message) VALUES ('$name', '$email', '$text_message')";
$result=mysql_query($sql) or die("Ошибка в запросе!".mysql_error());

/* Делаем редирект обратно */
header("Location: ".$_SERVER["HTTP_REFERER"]);
exit;
?>

Как записать данные в MySQL

Как записать данные в MySQL

Слайд 115Как выбрать данные из MySQL

"root","");
mysql_select_db("praktika", $db);

/* Выбираем данные */
$sql="SELECT name, email, message FROM message";
$result=mysql_query($sql);

while

($line=mysql_fetch_row($result)) {
echo "Имя:".$line[0]."
";
echo "Email:".$line[1]."
";
echo "Сообщение:".$line[2]."
";
}
?>
Как выбрать данные из MySQL

Слайд 116Загрузка файлов на сервер
Приложение для загрузки файлов на сервер представляет

собой HTML-форму (upload.html) и скрипт upload.php для ее обработки.
Загрузка файла

на сервер осуществляется с помощью multipart-формы, в которой есть поле загрузки файла. В качестве параметра enctype указывается значение multipart/form-data:


Загрузка файлов на серверПриложение для загрузки файлов на сервер представляет собой HTML-форму (upload.html) и скрипт upload.php для

Слайд 117Обработка multipart-форм
Как же PHP обрабатывает multipart-формы? Получив файл, он сохраняет

его во временном каталоге upload_tmp_dir, имя файла выбирается случайным образом. Затем

он создает четыре переменных суперглобального массива $_FILES. Этот массив содержит информацию о загруженном файле.

Содержимое массива $_FILES для нашего примера приведено ниже. Обратите внимание, что здесь предполагается использование имени uploadfile для поля выбора файла, в соответствии с приведенной выше multipart-форме. Разумеется, имя поля может быть любым.
$_FILES['uploadfile']['name'] - имя файла до его отправки на сервер, например, pict.gif;
$_FILES['uploadfile']['size'] - размер принятого файла в байтах;
$_FILES['uploadfile']['type'] - MIME-тип принятого файла (если браузер смог его определить), например: image/gif, image/png, image/jpeg, text/html;
$_FILES['uploadfile']['tmp_name'] (так мы назвали поле загрузки файла) - содержит имя файла во временном каталоге, например: /tmp/phpV3b3qY;
$_FILES['uploadfile']['error'] - Код ошибки, которая может возникнуть при загрузке файла. Ключ ['error'] был добавлен в PHP 4.2.0.

Обработка multipart-формКак же PHP обрабатывает multipart-формы? Получив файл, он сохраняет его во временном каталоге upload_tmp_dir, имя файла выбирается

Слайд 118Обработка multipart-форм
После завершения работы скрипта, временный файл будет удален. Это

означает, что мы должны его скопировать в другое место до

завершения работы скрипта. То есть алгоритм работы сценария загрузки файла на сервер такой:
Если кнопка "Submit" нажата, то файл уже будет загружен на сервер и его имя будут в переменной $_FILES['uploadfile']['name']. В этом случае скрипт должен сразу скопировать файл с именем $_FILES['uploadfile']['tmp_name'] в какой-нибудь каталог (необходимы права на запись в этот каталог).
Обработка multipart-формПосле завершения работы скрипта, временный файл будет удален. Это означает, что мы должны его скопировать в

Слайд 119Пишем upload.php

Пишем upload.php

Слайд 120Считывание файлов из директории

всё содержимое директории     for ($i = 0; $i 

родительский пропускаем              $path = $dir.$files[$i]; // Получаем путь к картинке
//Получив путь, мы можем выводить картинку в галлерею и слайдер, например,
// ”>     }   } ?>
Считывание файлов из директории”>     }   } ?>

Обратная связь

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

Email: Нажмите что бы посмотреть 

Что такое TheSlide.ru?

Это сайт презентации, докладов, проектов в PowerPoint. Здесь удобно  хранить и делиться своими презентациями с другими пользователями.


Для правообладателей

Яндекс.Метрика