Алгоритм создания и развития интернет ресурса презентация

Содержание

Слайд 1Московский технологический институт Проектирование и разработка интернет-приложений № 1-2
Кафедра: Информатики и

автоматизации
Автор: к.т.н., доцент Долин Георгий Аркадьевич
Контакты: dolin1974@gmail.com

Москва - 2016

01.02.2017

Слайд 2Концепция
Техническое задание
Доменное имя
Хостинг
Дизайн
Система управления контентом
Программирование
Наполнение контентом
Реклама
Продвижение

Алгоритм создания и развития интернет ресурса
01.02.2017

Слайд 3Идея
Бизнес план
Сайт визитка, корпоративный сайт, магазин, портал, социальная сеть, матрица ресурсов

Концепция
01.02.2017

Слайд 4ГОСТ 34
Алгоритмы
ПО прототипирования (Axure …)
Техническое задание
01.02.2017

Слайд 5RU
SU
РФ
com
org, net …

Доменное имя
01.02.2017

Слайд 6Место
Скорость
Обслуживание

Место на сервере
Выделенный сервер
Кластер серверов

Хостинг
01.02.2017

Слайд 7Инструменты
Верстка
Шаблоны
Web 2.0
Дизайн
01.02.2017

Слайд 8Платформа (UNIX – LINUX, FreeBSD или Windows Server)
CMS (платные (Bitrix, UMI-CMS,

Amiro …) и бесплатные (Joomla, Drupal, NetCAT … ) )

Система управления контентом

01.02.2017

Слайд 9Языки программирования (php, perl, asp, java … )
Технологии (скрипты, Ajax …

)
Базы данных

Программирование

01.02.2017

Слайд 10Новости (RSS)
Полезная информация
Каталоги
Галереи
Наполнение контентом
01.02.2017

Слайд 11Баннеры (картинки статичные и анимационные, видеофрагменты) и тизеры
Контекстная реклама (Яндекс Директ,

Бегун, Google Adwords)
Товарная реклама (Яндекс Маркет)
YouTube

Реклама

01.02.2017

Слайд 12SEO – топ поисковых систем
Блоги
Форумы
Рассылки
Новости и статьи на тематических ресурсах
SMO, SMM

– социальные сети

Продвижение

01.02.2017

Слайд 13HTML (DHTML), CSS, XML, PHP, PERL, ASP …
Разработка сайтов руками с

помощью текстовых редакторов (Notepad), web редакторов (Dreamweaver, FrontPage … )
Генераторы интернет сайтов (сайты визитки, корпоративные сайты)
Системы управления контентом (Bitrix, UMI-CMS, Amiro, NetCAT, Joomla, Drupal, ModX … )

Разработка интернет ресурсов

Слайд 14Web-страницы. Язык HTML и др.
Введение
Структура документа
Списки
Гиперссылки
Оформление документа
Рисунки
Таблицы
Фреймы
Блоки (DIV)
Понятие о JavaScript

Слайд 15Web-страницы. Язык HTML и др.
Тема 1. Введение

Слайд 16Что такое Web-страницы?
Гиперссылка – «активная»ссылка на другой документ.
Гипертекст – текст, содержащий

гиперссылки.
Гипермедиа-документ – документ, включающий текст, рисунки, звуки, видео, в котором любой элемент может быть гиперссылкой.
WWW (World Wide Web) – «всемирная паутина», служба Интернет для обмена информацией в виде гипертекста (и гипермедиа).
Web-страница – текстовый файл, в котором описано размещение материала на экране.
Браузер – программа для просмотра Web-страниц на экране (Internet Explorer, Mozilla Firefox, Opera).

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

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

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

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

Слайд 18Язык HTML
HTML = Hypertext Markup Language (язык разметки гипертекста)
HTML-страница – это текстовый

файл (Блокнот):



Моя страница


Привет!
…


index.html



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


парные тэги

(контейнеры)


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


...

открывающий

закрывающий

область действия тэга: описание таблицы

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


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


Привет!



first.html

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

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

Привет!

основная

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



Слайд 21Редактор HEFS
файловые операции
буфер обмена
один экран
запуск
браузера (F9)
назад
вперед
текстовый

редактор

браузер (IE)

отмена

Слайд 22Вставка тэгов в HEFS

Слайд 23Web-страницы. Язык HTML и др.
Тема 2. Структура документа.
Специальные символы

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

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

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


right

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




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

снится

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

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

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


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


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


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

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


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

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


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

атрибут тэга



Слайд 27Абзацы в HEFS

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

Слайд 29Специальные символы
А.С. Пушкин — солнце русской поэзии.





Дом сдали в 2011 году.

Пёс весил

12 кг.

Из дома вышел А.С. Пушкин – солнце
русской поэзии.

Вышел А.С. Пушкин – солнце русской поэзии.



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

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

Слайд 32Маркированные списки

Вася
Петя
Коля

unordered list (неупорядоченный список)
list item (элемент списка)


изменение маркера:


    ...

disk ∙
circle ○
square ■

Слайд 33Нумерованные списки

Вася
Петя
Коля

ordered list (упорядоченный список)
изменение нумерации:

...

1,

i, I, a, A

Слайд 34Списки определений

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

definition

list (список определений)

definition term (термин)

definition description (описание)

Слайд 35Многоуровневые списки
Города России       



Города Украины   




  Москва   Санкт-Петерург
  Киев   Одесса

Слайд 36Списки в HEFS
Ctrl-L вставить элемент списка

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

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


hyper reference (гиперссылка)

страница во вложенной папке

Пример

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

Текст

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

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



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

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


Васин текст

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


Скачать

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

Глава 1

Глава 2


Глава 1
Это текст

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

Наверх

Глава 2


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

Наверх





в другом файле

Цвет текста

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

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

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

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


Слайд 43Гиперссылки в HEFS
локальная ссылка
Ctrl-A гиперссылка на выделенный блок, адрес

вводить вручную

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

Слайд 44Web-страницы. Язык HTML и др.
Тема 5. Оформление документа. Стилевые файлы (CSS)

Слайд 45Содержание и оформление
Сборник задач по физике
Григорий Остер
Задача 61 Петя ехал к

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

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

логическая разметка
(*.html)




оформление

физическая разметка
(*.css)

main.css

mini.css

print.css

Слайд 46Логическая разметка

Слайд 47Форматированный текст (тексты программ)
program qq;
var a, b: integer;
begin
writeln("Введите два

числа");
read(a,b);
writeln(a,'+',b,'=',a+b);
end.


program qq;
var a, b: integer;
begin
  writeln("Введите два числа");
  read(a,b);
  writeln(a,'+',b,'=',a+b);
end.

отформатированный текст
(preformatted)

'../images/back.jpg‘
'http://www.vasya.ru/images/back.jpg'
#6e5c62;

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




из

той же папки:

из другой папки:

с другого сервера:

image (изображение)

source (источник)

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

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

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

HSPACE=10 VSPACE=10>

VSPACE
(vertical space)

HSPACE
(horizontal space)



Слайд 73Выравнивание и отступы (CSS)

img.left {
float: left;
margin:

5px 10px;
}


= VSPACE

= HSPACE

= ALIGN

margin: 5px 10px 5px 0;




отступа слева нет!

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

всплывающая подсказка
надпись

на месте рисунка, если его нет

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

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

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



ALT="Таблицы" BORDER=0>

локальная ссылка:

ссылка на другой сервер:

иначе будет синяя рамка вокруг

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


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


Слайд 76Рисунки в HEFS
вставить рисунок

Слайд 77Web-страницы. Язык HTML и др.
Тема 7. Таблицы

Слайд 78Простейшая таблица


Таблица из одной строки
из трех

столбцов
без указания ширины таблицы
и ячеек.


толщина рамки

TABLE таблица
TR = table row строка таблицы
TD = table data данные таблицы
TH = table header заголовок (жирный, по центру)

Слайд 79Размеры

...

ширина в пикселях или в % от ширины окна

браузера

высота в пикселях


...

всей таблицы:

строки:

ячейки:


...

ширина в пикселях или в % от ширины таблицы

Слайд 80Размеры (через CSS)
table.spec {
width: 60%;
height: 300;
}
table.spec tr {
height:

50px;
}

всей таблицы:

строки:

ячейки:

table.spec td.qq {
width: 25%;
height: 50px;
}


...


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


По

центру, по верхней границе
WIDTH=200>По правой границе,
по середине



...

всей таблицы:

информации в ячейках:

left,
center,
right

left,
center,
right

top,
middle,
bottom

Слайд 82Выравнивание (через CSS)


По центру,

по верхней границе
По правой
границе, по середине


table.ex tr.centop {
text-align: center;
vertical-align: top;
height:100px;
}
table.ex td.rmid {
text-align: right;
vertical-align: middle;
width:200px;
}

left,
center,
right

top,
middle,
bottom

Слайд 83Фон и цвет текста


Привет!




Таблица из двух строк
и двух столбцов


цвет фона

фоновый рисунок

Слайд 84Фон и цвет текста (CSS)


Привет!




Таблица
из двух строк
и двух столбцов


table.qq td {
background: green;
}
table.qq tr.spec td {
background: blue;
color: white;
}
table.qq tr.spec td.r {
background: red;
}
table.qq td.pic {
background: url("web.jpg");
}

цвет фона

рисунок

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

BGCOLOR = blue>

1
2


интервал между ячейками

отступ внутри ячеек

CELLSPACING

CELLSPACING

CELLPADDING

CELLPADDING

Слайд 86Отступы (CSS)


1
2


border-spacing
border-spacing
padding
padding
table#qq

{
background: blue;
border-collapse: separate;
border-spacing: 10px;
padding: 10px;
}
#qq tr {
background: white;
}

кроме IE 6

Слайд 87Объединение ячеек


Привет!


Вася,
Петя,

Маша!









Привет! Вася,
Петя,
Маша!

column span охват столбцов

row span охват строк

Слайд 88Вложенные таблицы

















ВасяПетя
МашаДаша




122
3334444

Слайд 89Таблицы в HEFS

Слайд 90Web-страницы. Язык HTML и др.
Тема 8. Фреймы

Слайд 91Фреймы
Фрейм (frame) – это часть сложной Web-страницы, в которую может быть

загружена другая Web-страница.

3 файла:
left.html – страница в левой части
right.html – страница в правой части
index.html – описание структуры

Слайд 92Описание структуры
index.html


Фреймы-столбцы



NAME="qq">


columns
столбцы

ширина в пикселях или %

все остальное место

source
источник

имя фрейма (для ссылок)

Слайд 93Граница между фреймами

...


...

граница между фреймами:
0 – невидима,

1 - видима

ширина полосы между фреймами, за которую можно перетащить границу

Слайд 94Настройка фрейма (FRAME)

MARGINHEIGHT="0"
NORESIZE
SCROLLING="auto">

убрать отступы от края фрейма до содержимого

полоса прокрутки:
auto – появляется, когда надо
yes – есть всегда
no – нет никогда

запретить изменение размеров

Слайд 95Фреймы-строки
index.html


Фреймы-строки



NAME="qq">


строки

ширина в пикселях или %

Слайд 96Сложные структуры (3 фрейма)
index.html









SRC="up.html">


Слайд 97Как открыть ссылку в другом фрейме

Глава

2


TARGET
_blank – в новом окне
_parent – в родительском окне
_top – в главном окне
(убрать фреймы)

Слайд 98Фреймы в HEFS

Слайд 99Работа с несколькими страницами
переключение страниц
закрыть текущую страницу (Ctrl-W)
просмотр активной страницы

Слайд 100Web-страницы. Язык HTML и др.
Тема 9. Блоки (DIV)

Слайд 101Блоки (DIV) – любое содержимое


Lorem ipsum dolor sit amet,

consectetur adipiscing elit. Nam nunc libero, semper ac feugiat sed, sollicitudin et mauris.





1


Слайд 102Блоки (DIV) – рамки и отступы



Lorem ipsum dolor sit amet, consectetur

adipiscing elit. Nam nunc libero, semper ac feugiat sed, sollicitudin et mauris. In hac habitasse platea dictumst. Cras dapibus nulla ac metus commodo viverra eget vitae erat. Donec ut mi tellus. Mauris eu turpis vel tellus tincidunt pulvinar.




padding

border

margin

#qq {
padding: 5px 10px;
border: 1px solid green;
margin: 5px 15px 5px 10px;
}

Слайд 103«Плавающие» блоки

.picture {
float: left;
margin: 5px;
}
.picture p

{
margin: 0;
text-align: center;
font-family: sans-serif;
font-size: 80%;
font-weight: bold;
}




На природе



свойства блока

свойства абзаца внутри блока

Слайд 104Web-страницы. Язык HTML и др.
Тема 10. Понятие о Javascript

Слайд 105Что может Javascript?
информация статична
нет интерактивности (только переход на другую страницу)
Чем плоха

HTML-страница?

Что можно сделать с помощью Javascript?

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

Javascript может быть отключен в браузере

Слайд 106Основные принципы
каждый элемент на странице (текст, рисунок, таблица) – это объект,

имеющий свои свойства
свойства объекта можно менять из программы на Javascript (скрипта)
все, что происходит – это события
все события можно «обрабатывать», т.е. как-то реагировать на них

HTML + Javascript = DHTML (Dynamic HTML)

Слайд 107Замена рисунка при движении мыши

когда курсор мыши

над рисунком

после ухода мыши

События:
onMouseOver – курсор мыши над объектом
onMouseOut – курсор мыши ушел с объекта

начальный рисунок

this – этот объект
this.src – свойство SRC этого объекта

Слайд 108Скрытый блок



Детали — это гайка, шайба, болт, винт, шуруп,

гвоздь и др.


.hidden {
display:none;
}


Слайд 109Скрытый блок: оформление ссылки




Показать детали

остаться на

странице

по щелчку вызвать функцию show

переход не выполнять

Слайд 110Скрытый блок: как его открыть?
function show ( name )
{
var elem

= document.getElementById(name);
if ( elem )
elem.style.display = "block";
}




test.js



найти блок по имени

изменить свойство display

Слайд 111Формы



value="Готово" onClick="check();">

надпись на кнопке

имя формы

имя элемента

делать по щелчку

Слайд 112Форма: обращение к элементам
function check()
{
if ( calc.answer.value == "4" )

alert("Правильно!");
else alert("Неправильно!");
}

test.js


вывести сообщение

Похожие презентации

Носители информации 282
Інформатика як наука. Поняття про інформаційні системи та технології. Апаратне та програмне забезпечення ПК 584
Машина Поста 643
Государственная библиография. Принципы формирования. Система библиографических указателей 341
Введение в Delphi. (Лекция 2) 543
Thesis proposal. AMF has shown to improve the sensitivity of molecular MSOT 250

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

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

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

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

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

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

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