Введение в технологию создания WEB-сайтов образовательного назначения

Нажмите для полного просмотра!

Введение в технологию создания WEB-сайтов образовательного назначения, слайд №2

Введение в технологию создания WEB-сайтов образовательного назначения, слайд №3

Введение в технологию создания WEB-сайтов образовательного назначения, слайд №4

Введение в технологию создания WEB-сайтов образовательного назначения, слайд №5

Введение в технологию создания WEB-сайтов образовательного назначения, слайд №6

Введение в технологию создания WEB-сайтов образовательного назначения, слайд №7

Введение в технологию создания WEB-сайтов образовательного назначения, слайд №8

Введение в технологию создания WEB-сайтов образовательного назначения, слайд №9

Введение в технологию создания WEB-сайтов образовательного назначения, слайд №10

Введение в технологию создания WEB-сайтов образовательного назначения, слайд №11

Введение в технологию создания WEB-сайтов образовательного назначения, слайд №12

Введение в технологию создания WEB-сайтов образовательного назначения, слайд №13

Введение в технологию создания WEB-сайтов образовательного назначения, слайд №14

Введение в технологию создания WEB-сайтов образовательного назначения, слайд №15

Введение в технологию создания WEB-сайтов образовательного назначения, слайд №16

Введение в технологию создания WEB-сайтов образовательного назначения, слайд №17

Введение в технологию создания WEB-сайтов образовательного назначения, слайд №18

Введение в технологию создания WEB-сайтов образовательного назначения, слайд №19

Введение в технологию создания WEB-сайтов образовательного назначения, слайд №20

Введение в технологию создания WEB-сайтов образовательного назначения, слайд №21

Введение в технологию создания WEB-сайтов образовательного назначения, слайд №22

Введение в технологию создания WEB-сайтов образовательного назначения, слайд №23

Введение в технологию создания WEB-сайтов образовательного назначения, слайд №24

Введение в технологию создания WEB-сайтов образовательного назначения, слайд №25

Введение в технологию создания WEB-сайтов образовательного назначения, слайд №26

Введение в технологию создания WEB-сайтов образовательного назначения, слайд №27

Введение в технологию создания WEB-сайтов образовательного назначения, слайд №28

Введение в технологию создания WEB-сайтов образовательного назначения, слайд №29

Введение в технологию создания WEB-сайтов образовательного назначения, слайд №30

Введение в технологию создания WEB-сайтов образовательного назначения, слайд №31

Введение в технологию создания WEB-сайтов образовательного назначения, слайд №32

Введение в технологию создания WEB-сайтов образовательного назначения, слайд №33

Введение в технологию создания WEB-сайтов образовательного назначения, слайд №34

Введение в технологию создания WEB-сайтов образовательного назначения, слайд №35

Введение в технологию создания WEB-сайтов образовательного назначения, слайд №36

Введение в технологию создания WEB-сайтов образовательного назначения, слайд №37

Введение в технологию создания WEB-сайтов образовательного назначения, слайд №38

Введение в технологию создания WEB-сайтов образовательного назначения, слайд №39

Введение в технологию создания WEB-сайтов образовательного назначения, слайд №40

Введение в технологию создания WEB-сайтов образовательного назначения, слайд №41

Введение в технологию создания WEB-сайтов образовательного назначения, слайд №42

Введение в технологию создания WEB-сайтов образовательного назначения, слайд №43

Содержание ▲

Вы можете ознакомиться и скачать презентацию на тему Введение в технологию создания WEB-сайтов образовательного назначения. Доклад-сообщение содержит 43 слайдов. Презентации для любого класса можно скачать бесплатно. Если материал и наш сайт презентаций Mypresentation Вам понравились – поделитесь им с друзьями с помощью социальных кнопок и добавьте в закладки в своем браузере.

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

Слайд 1

Описание слайда:

Введение в технологию создания WEB-сайтов образовательного назначения

Слайд 2

Описание слайда:

Цель: Создать Web-сайт Задачи (вопросы) идеологические: 1. Определить, зачем нам нужно «окно» в мир? 2. Какая информация для «внешнего» мира будет представлена? 3. Какая информация от «внешних» пользователей-читателей нужна нам? 4. Какие выразительные средства будут использованы для привлечения внимания? 5. Каков уровень безопасности мы желаем обеспечить себе и нашим партнерам? 6. Какие средства разработки будут использованы? 7. На каком Web-сервере будет размещен наш сайт?

Слайд 3

Описание слайда:

Цель: Создать Web-сайт Задачи технические: 1. Изучить язык создания сайта (HTML и его дальнейшее развитие). 2. Познакомиться со средствами автоматизации разработки сайта. 3. Изучить работу одного (нескольких) Web-сервера. 4. Изучить СУБД и методы взаимодействия сайта с БД. 5. Изучить средства анимации.

Слайд 4

Описание слайда:

Проблема: Как это может быть реализовано в школе? Вариант доступный 1. Использовать локальную сеть компьютерного класса. 2. На выделенном компьютере установить Web-сервер (например, Apache). 3. Организовать Intranet для экспериментов и факультативной работы. Вариант ??? После экспериментов (см. первый вариант), имея постоянное и устойчивое подключение к Internet через местного провайдера, выложить свои разработанные сайты и узлы на один из Web-серверов (например, magnitka.ru). Вариант !!! В школе организовать Web-сервер, аналогичный коммерческим серверам.

Слайд 5

Описание слайда:

Так как же?.. Понятие и типы web-сайтов; Этапы создания сайта; Средства создания сайтов; Принципы построения HTML документа.

Слайд 6

Описание слайда:

Основные понятия World Wide Web - это часть Internet, представляющая собой гигантский набор документов, хранящихся на компьютерах по всему миру. Web-страница - это отдельный документ Web, который способен содержать информацию различного вида - текст, рисунки, фотографии, фрагменты аудио- и видеозаписей. Web-страницы хранятся на компьютерах, которые носят название Web-серверов. HTTP - Hyper Text Transfer Protocol - протокол передачи гипертекста, используется для передачи гипертестовых документов между серевером и клиентом в среде WWW URL (Uniform Resource Locator) – уникальный адрес Web-страниц. URL состоит из наименования используемого протокола, названия сервера и обозначения пути доступа к странице. Например:

Слайд 7

Описание слайда:

Основные понятия (продолжение) Web-браузер – программа поиска и просмотра информации в Web. Гиперссылки – подсвечиваемые фрагменты текста или графические изображения, расположенные на Web-страницах, позволяющие быстро переходить к другим страницам Web. HTML – язык разметки гипертекста (Hypertext Markup Language)

Слайд 8

Описание слайда:

Слайд 9

Описание слайда:

Классификация сайтов 1. С точки зрения причастности сайтов к процессу зарабатывания денег: коммерческие и некоммерческие сайты. 2. По степени долговечности: сайты длительного и кратковременного пользования.

Слайд 10

Описание слайда:

Коммерческие сайты Визитка Cайт, содержащий основную и неизменяемую информацию о компании. Каталог (сайт-витрина) Сайт, преимущественную часть контента (информационного наполнения), которого составляет информация о магазинах, товарах и/или услугах и ценах, предложения от многих агентств, компаний или частных лиц. Однако, торговля через Интернет не осуществляется. Целью таких сайтов является привлечение клиентов в офис (магазин) компании. Электронный магазин Cайт, предназначенный для продажи товаров через сеть Интернет и автоматизации сопутствующих бизнес-процессов. Содержит каталог продукции с ценами и систему заказов, интегрированную в автоматизированную систему предприятия

Слайд 11

Описание слайда:

Слайд 12

Описание слайда:

Этапы создания сайта Выбор компании для размещения на ее технике сайта . Проектирование Web-страниц сайта с учетом возможностей, предложений и требований владельца сервера. Создание Web-страниц, размещение файлов на выбранном сервере. Регистрация доменного имени виртуального сервера. Тестирование и получение предварительных характеристик работы, оценка сайта. Продвижение сайта в Internet, в том числе: регистрация в поисковых системах, каталогах, рейтингах; регистрация в службах баннерообмена. Анализ работы сайта и его доработка.

Слайд 13

Описание слайда:

Средства создания сайтов Группы инструментов создания Web-страниц: 1. Модули расширения 2. Автономные редакторы HTML 3. Специализированные средства

Слайд 14

Описание слайда:

1. Модули расширения Это программные компоненты (plug-ins), которые встраиваются в распространенные программные продукты для конвертирования данных, созданных в этих продуктах, в HTML формат. Модули расширения возникли в 1995-1996 годах. Модули расширения представляют собой преобразователи форматов файлов из оригинального формата в HTML. Основные примеры модулей расширения: Internet Assistants for Microsoft Office 95 - Internet Assistant forMicrosoft Word, Excel, Access, Shedule+, PowerPoint.

Слайд 15

Описание слайда:

2. Автономные редакторы HTML Две крупные категории: графические и программные редакторы. Внешне редакторы обоих типов выглядят очень похоже, и те и другие напоминают современные графические текстовые процессоры. Различия заключены в методах визуального представления элементов, составляющих web-страницу. Графические инструменты представляют страницу в режиме соответствия (WYSIWIG - What You See Is What You Get; Что вы видите, то и получите) - она предстает такой, какой будет в окне браузера. Программа встроена в страницу, но скрыта от автора, который не работает с ней напрямую. Программные редакторы выводят на экран в качестве основного представления страницы исходный текст на языке HTML, представляя при этом в распоряжении автора мощные средства генерации кода, избавляющие от необходимости писать его вручную.

Слайд 16

Описание слайда:

Примеры автономных редакторов HTML Microsoft FrontPage Netscape Navigator Gold 3.0 Netscape Communicator 4.0 HoTMetaL Pro 3.0 WebEdit Professional Edition 2.0 …

Слайд 17

Описание слайда:

3.Специализированные средства создания Web-страниц Современные требования, предъявляемые к средствам разработки Web-сайтов, включают в себя: Полную визуальную разработку Web-страниц. Поддержку каскадных таблиц стилей. Использование современных скриптовых языков, таких как JavaScript и т.д. Генерацию Dynamic HTML для различных браузеров. Средства наглядного дизайна таблиц и фреймов. Динамическое отображение создаваемой страницы в браузере. Шаблоны WWW-страниц или специальные программы - "мастера" по их созданию. Средства по управлению Web-сайтом (отслеживание связей и проверка ссылок между страницами).

Слайд 18

Описание слайда:

Общие идеи построения и интерпретации HTML документов

Слайд 19

Описание слайда:

Слайд 20

Описание слайда:

Слайд 21

Описание слайда:

Каждый тэг разметки HTML имеет свой идентификатор и, возможно, несколько параметров (атрибутов). Название тэга вместе с его параметрами заключаются в скобки . В общем виде тэг выглядит следующим образом: Каждый тэг разметки HTML имеет свой идентификатор и, возможно, несколько параметров (атрибутов). Название тэга вместе с его параметрами заключаются в скобки . В общем виде тэг выглядит следующим образом: Текст1 Например: Выравнивание текста

Слайд 22

Описание слайда:

Как это будет в браузере…

Слайд 23

Описание слайда:

Некоторые правила HTML-документа Внутри одного тэга может находиться произвольное количество тэгов. Интерпретация текста HTML документа производится сверху вниз. Все символы управления текстом в HTML документе (несколько пробелов подряд, перевод строки и т.п.) заменяются одиночным символом пробела. Строчные и прописные символы в именах (идентификаторах) тэгов и их атрибутов, как правило, не различаются.

Слайд 24

Описание слайда:

Пример страницы HTML-документа Новая страница 3 Здесь находится весь сайт!

Слайд 25

Описание слайда:

Структура гипертекстового документа

Слайд 26

Описание слайда:

Тэги физического форматирования текста P и DIV - тэги параграфа; CENTER - тэг горизонтального центрированного текста; BLOQUOTE - тэг блока с отступом; H1 – H9 тэги разметки заголовков; BR - непарный тэг для перевода строки ; HR - непарный тэг для начертания горизонтальной линии. Для форматирования символов текста используются: I (курсив), B (жирный), U (подчеркивание), S (зачеркнутый текст), SUB (нижний индекс), SUP (верхний индекс) и тэги управления шрифтами FONT (текущий шрифт), BASEFONT (шрифт по умолчанию).

Слайд 27

Описание слайда:

Пример: Это полужирный шрифт. А это курсив. Этот текст будет написан полужирным и курсивным шрифтом

Слайд 28

Описание слайда:

А так он будет выглядеть…

Слайд 29

Описание слайда:

Пример использования цветового оформления Шрифт размера 1 Шрифт размера 3 зеленого цвета Шрифт размера 7 розового цвета

Слайд 30

Описание слайда:

Слайд 31

Описание слайда:

Полезные дополнения HTML

Слайд 32

Описание слайда:

Каскадные таблицы стилей Cascading Style Sheets (каскадные таблицы стилей) – это язык, содержащий набор средств для описания внешнего вида отображения любых HTML -документов.

Слайд 33

Описание слайда:

Создание страницы стилей в FrontPage

Слайд 34

Описание слайда:

Пример таблицы стилей body { font-family: Verdana, Arial, Helvetica; background-color: rgb(0,0,0); color: rgb(255,255,255); } table { table-border-color-light: rgb(255,255,102); table-border-color-dark: rgb(0,0,0); } h1, h2, h3, h4, h5, h6 { font-family: Verdana, Arial, Helvetica;} h1{ color: rgb(255,204,0);} h2 { color: rgb(255,255,255); } h3 { color: rgb(204,51,0); } h4 { color: rgb(255,255,153); } h5 { color: rgb(255,255,0); } h6 { color: rgb(255,255,255); }

Слайд 35

Описание слайда:

CGI – Common Gateway Interface Для обмена данными между страницей и сервером используется специальный механизм, регламентируемый протоколом: CGI – Common Gateway Interface, унифицированный шлюзовый интерфейс

Слайд 36

Описание слайда:

Взаимодействие браузера, сервера и CGI-программы

Слайд 37

Описание слайда:

Вставка элементов в ФОРМУ (FrontPage)

Слайд 38

Описание слайда:

Форма в рабочем поле браузера

Слайд 39

Описание слайда:

Фрагмент HTML-кода (!) Ваше имя: E-mail: Ваши комментарии:

Слайд 40

Описание слайда:

Использование шаблона FrontPage для создания «Формы обратной связи»

Слайд 41

Описание слайда:

Технология Server Side Include (SSI) Server Side Include – на стороне сервера. Эта технология позволяет Web-серверу включать в текст HTML-страниц любой другой текст: содержимое текстовых файлов или, например, результат работы программ на сервере. Происходит это «включение» непосредственно перед передачей текста HTML-страницы браузеру пользователя.

Слайд 42

Описание слайда:

Скрипты в HTML-документах (пример) function calc() { var x=12; var y=5; var result=x*y; alert ("Result="*); } Новая страница Здесь находится весь сайт