Содержание
- 2. Концепция Техническое задание Доменное имя Хостинг Дизайн Система управления контентом Программирование Наполнение контентом Реклама Продвижение Алгоритм
- 3. Идея Бизнес план Сайт визитка, корпоративный сайт, магазин, портал, социальная сеть, матрица ресурсов Концепция 01.02.2017
- 4. ГОСТ 34 Алгоритмы ПО прототипирования (Axure …) Техническое задание 01.02.2017
- 5. RU 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 …) и бесплатные
- 9. Языки программирования (php, perl, asp, java … ) Технологии (скрипты, Ajax … ) Базы данных Программирование
- 10. Новости (RSS) Полезная информация Каталоги Галереи Наполнение контентом 01.02.2017
- 11. Баннеры (картинки статичные и анимационные, видеофрагменты) и тизеры Контекстная реклама (Яндекс Директ, Бегун, Google Adwords) Товарная
- 12. SEO – топ поисковых систем Блоги Форумы Рассылки Новости и статьи на тематических ресурсах SMO, SMM
- 13. HTML (DHTML), CSS, XML, PHP, PERL, ASP … Разработка сайтов руками с помощью текстовых редакторов (Notepad),
- 14. Web-страницы. Язык HTML и др. Введение Структура документа Списки Гиперссылки Оформление документа Рисунки Таблицы Фреймы Блоки
- 15. Web-страницы. Язык HTML и др. Тема 1. Введение
- 16. Что такое Web-страницы? Гиперссылка – «активная»ссылка на другой документ. Гипертекст – текст, содержащий гиперссылки. Гипермедиа-документ –
- 17. Какие бывают Web-страницы? статические – существуют на сервере в виде готовых файлов: *.htm, *.html динамические –
- 18. Язык HTML HTML = Hypertext Markup Language (язык разметки гипертекста) HTML-страница – это текстовый файл (Блокнот):
- 19. Тэги Тэг – это команда языка HTML, которую выполняет браузер: непарные тэги парные тэги (контейнеры) вставить
- 20. Простейшая Web-страница Моя первая Web-страница Привет! first.html Моя первая Web-страница шапка («голова») Привет! основная часть («тело»)
- 21. Редактор HEFS файловые операции буфер обмена один экран запуск браузера (F9) назад вперед текстовый редактор браузер
- 22. Вставка тэгов в HEFS
- 23. Web-страницы. Язык HTML и др. Тема 2. Структура документа. Специальные символы
- 24. Заголовки: H1 … H6 Заголовок документа Заголовок раздела Заголовок подраздела Заголовок параграфа Комментарий Авторские пометки выравнивание:
- 25. Абзацы переход на новую строку абзац (с отступами) И вечный бой! Покой нам только снится Сквозь
- 26. Выравнивание Этот текст выровнен по центру. Этот текст выровнен по ширине. Этот текст выровнен по ширине.
- 27. Абзацы в HEFS
- 28. Специальные символы
- 29. Специальные символы А.С. Пушкин — солнце русской поэзии. Дом сдали в 2011 году. Пёс весил 12 кг. Из дома вышел
- 30. Специальные символы в HEFS
- 31. Web-страницы. Язык HTML и др. Тема 3. Списки
- 32. Маркированные списки Вася Петя Коля unordered list (неупорядоченный список) list item (элемент списка) изменение маркера: ...
- 33. Нумерованные списки Вася Петя Коля ordered list (упорядоченный список) изменение нумерации: ... 1, i, I, a,
- 34. Списки определений компьютер устройство для обработки информации дискета гибкий магнитный диск винчестер жесткий магнитный диск definition
- 35. Многоуровневые списки Города России Города Украины Москва Санкт-Петерург Киев Одесса
- 36. Списки в HEFS Ctrl-L вставить элемент списка
- 37. Web-страницы. Язык HTML и др. Тема 4. Гиперссылки
- 38. Ссылки на другие страницы сайта Таблицы страница в той же папке anchor (якорь) hyper reference (гиперссылка)
- 39. Примеры (ссылки из файла rock.html)
- 40. Ссылки на другие сайты Почта на главную страницу сайта index.htm, index.html, default.asp, … на конкретную страницу
- 41. Ссылки внутри страницы Глава 1 Глава 2 Глава 1 Это текст главы 1. Это текст главы
- 42. Запуск почтовой программы Напишите мне!
- 43. Гиперссылки в HEFS локальная ссылка Ctrl-A гиперссылка на выделенный блок, адрес вводить вручную вставить только адрес
- 44. Web-страницы. Язык HTML и др. Тема 5. Оформление документа. Стилевые файлы (CSS)
- 45. Содержание и оформление Сборник задач по физике Григорий Остер Задача 61 Петя ехал к бабушке на
- 46. Логическая разметка
- 47. Форматированный текст (тексты программ) program qq; var a, b: integer; begin writeln("Введите два числа"); read(a,b); writeln(a,'+',b,'=',a+b);
- 48. Физическая разметка
- 49. Форматирование текста в HEFS Ctrl-B
- 50. Тэг BODY – общие свойства страницы цвет фона и текста цвет гиперссылок Привет! ... цвет текста
- 51. Вставка атрибутов в HEFS вставить только код цвета
- 52. Цвет гиперссылок ... LINK ссылки, на которых не были VLINK посещенные ссылки ALINK активные ссылки
- 53. Тэг FONT – свойства блока текста цвет текста размер шрифта Привет! Как дела? Привет! SIZE=6> Как
- 54. Линия-разделитель horizontal rule ширина в пикселях или процентах толщина выравнивание
- 55. Кодирование цвета имена red, green, blue, magenta, black, шестнадцатеричные коды white R G B # F
- 56. Что такое CSS? HTML – язык логической разметки текста, определяющий содержание и структуру страницы (заголовки разных
- 57. Свойства элементов страницы body { color: white; background: #FF6600; } название тэга значение селектор (свойство) color
- 58. Подключение стилевого файла Пример CSS type="text/css"> ... qq.html my.css body { color: white; background: #0000E0; }
- 59. Шрифты p { font-family: Arial,sans-serif; font-size: 20px; font-style: italic; font-weight: bold; } для всех абзацев семейство
- 60. Классы (стили оформления) p.spec { font-style: italic; background: green; } для абзацев класса spec L’Etat c’est
- 61. Размеры, выравнивание p { background: #E6E6FF; width: 80%; height: 100px; text-align: left; text-indent: 20px; } ширина
- 62. Рамка и поля p { background: #ccffcc; border: 1px solid green; margin: 0 40px 20px 40px;
- 63. p.hallo { background: white url(images/grad.jpg); } Фоновый рисунок Привет, Вася! p.hallo { background: url(grad.jpg) repeat-y; }
- 64. Фоновый рисунок без повторения p.email { background: url(letter.gif) no-repeat; padding-left: 20px; } qq@mail.ru qq@mail.ru qq@mail.ru
- 65. Ссылки p.email a { color: green; text-decoration:none; } p.email a:hover { color: #00F; text-decoration:underline; } p.email
- 66. Выделение отдельных слов .latin { color: green; font-style: italic; } класс, применимый ко всему курсив Собака(лат.
- 67. Web-страницы. Язык HTML и др. Тема 6. Рисунки
- 68. Форматы рисунков GIF (Graphic Interchange Format) сжатие без потерь прозрачные области анимация только с палитрой (2…256
- 69. Фон страницы (через CSS) body { background: url(back.jpg); } 'images/back.jpg' '../images/back.jpg‘ 'http://www.vasya.ru/images/back.jpg' #6e5c62;
- 70. Рисунки в документе из той же папки: из другой папки: с другого сервера: image (изображение) source
- 71. Выравнивание left right top bottom (по умолчанию) middle
- 72. Отступы VSPACE (vertical space) HSPACE (horizontal space)
- 73. Выравнивание и отступы (CSS) img.left { float: left; margin: 5px 10px; } = VSPACE = HSPACE
- 74. Другие атрибуты всплывающая подсказка надпись на месте рисунка, если его нет размеры позволяют: растянуть - сжать
- 75. Рисунок-гиперссылка ALT="Бесплатная почта" BORDER=0> локальная ссылка: ссылка на другой сервер: иначе будет синяя рамка вокруг если
- 76. Рисунки в HEFS вставить рисунок
- 77. Web-страницы. Язык HTML и др. Тема 7. Таблицы
- 78. Простейшая таблица Таблица из одной строки из трех столбцов без указания ширины таблицы и ячеек. толщина
- 79. Размеры ... ширина в пикселях или в % от ширины окна браузера высота в пикселях ...
- 80. Размеры (через CSS) table.spec { width: 60%; height: 300; } table.spec tr { height: 50px; }
- 81. Выравнивание VALIGN="top"> По центру, по верхней границе WIDTH=200>По правой границе, по середине ... всей таблицы: информации
- 82. Выравнивание (через CSS) По центру, по верхней границе По правой границе, по середине table.ex tr.centop {
- 83. Фон и цвет текста Привет! Таблица из двух строк и двух столбцов цвет фона фоновый рисунок
- 84. Фон и цвет текста (CSS) Привет! Таблица из двух строк и двух столбцов table.qq td {
- 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;
- 87. Объединение ячеек Привет! Вася, Петя, Маша! Привет! Вася, Петя, Маша! column span охват столбцов row span
- 88. Вложенные таблицы Вася Петя Маша Даша 1 22 333 4444
- 89. Таблицы в HEFS
- 90. Web-страницы. Язык HTML и др. Тема 8. Фреймы
- 91. Фреймы Фрейм (frame) – это часть сложной Web-страницы, в которую может быть загружена другая Web-страница. 3
- 92. Описание структуры index.html Фреймы-столбцы columns столбцы ширина в пикселях или % все остальное место source источник
- 93. Граница между фреймами ... ... граница между фреймами: 0 – невидима, 1 - видима ширина полосы
- 94. Настройка фрейма (FRAME) MARGINHEIGHT="0" NORESIZE SCROLLING="auto"> убрать отступы от края фрейма до содержимого полоса прокрутки: auto
- 95. Фреймы-строки index.html Фреймы-строки NAME="qq"> строки ширина в пикселях или %
- 96. Сложные структуры (3 фрейма) index.html
- 97. Как открыть ссылку в другом фрейме TARGET="qq">Глава 2 TARGET _blank – в новом окне _parent –
- 98. Фреймы в HEFS
- 99. Работа с несколькими страницами переключение страниц закрыть текущую страницу (Ctrl-W) просмотр активной страницы
- 100. Web-страницы. Язык HTML и др. Тема 9. Блоки (DIV)
- 101. Блоки (DIV) – любое содержимое Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nunc libero,
- 102. Блоки (DIV) – рамки и отступы Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nunc
- 103. «Плавающие» блоки .picture { float: left; margin: 5px; } .picture p { margin: 0; text-align: center;
- 104. Web-страницы. Язык HTML и др. Тема 10. Понятие о Javascript
- 105. Что может Javascript? информация статична нет интерактивности (только переход на другую страницу) Чем плоха HTML-страница? Что
- 106. Основные принципы каждый элемент на странице (текст, рисунок, таблица) – это объект, имеющий свои свойства свойства
- 107. Замена рисунка при движении мыши когда курсор мыши над рисунком после ухода мыши События: onMouseOver –
- 108. Скрытый блок Детали — это гайка, шайба, болт, винт, шуруп, гвоздь и др. .hidden { display:none;
- 109. Скрытый блок: оформление ссылки onClick="show('details');return false;"> Показать детали остаться на странице по щелчку вызвать функцию show
- 110. Скрытый блок: как его открыть? function show ( name ) { var elem = document.getElementById(name); if
- 111. Формы value="Готово" onClick="check();"> надпись на кнопке имя формы имя элемента делать по щелчку
- 112. Форма: обращение к элементам function check() { if ( calc.answer.value == "4" ) alert("Правильно!"); else alert("Неправильно!");
- 113. Bitrix
- 114. UMI-CMS
- 116. Скачать презентацию