Презентация на тему 1. WEB-страницы.

Презентация на тему 1. WEB-страницы., предмет презентации: Дизайн. Этот материал содержит 133 слайдов. Красочные слайды и илюстрации помогут Вам заинтересовать свою аудиторию. Для просмотра воспользуйтесь проигрывателем, если материал оказался полезным для Вас - поделитесь им с друзьями с помощью социальных кнопок и добавьте наш сайт презентаций ThePresentation.ru в закладки!

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

Слайд 1
Текст слайда:

1. WEB-страницы.

ТЕМА: «Построение сайтов»


Слайд 2
Текст слайда:

Что такое Web-страницы?

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


Слайд 3
Текст слайда:

Браузер является одним из основных, основополагающих программных продуктов у большинства пользователей персональных компьютеров. Действительно, Интернет охватывает все больше сфер деятельности человека. Получение свежей информации, загрузка новых программных продуктов, торговля, общение - все это осуществляется с помощью браузера. Большинство пользователей персональных компьютеров не задумываются, какой программный продукт используется для выходя в Сеть. Операционная система Windows содержит встроенный инструмент навигации по просторам Web. По этой причине приобщение к Интернету для большинства его пользователей начинается именно с программы, которую не надо устанавливать, которая есть на компьютере сразу после покупки системного блока в магазине, с Internet Explorer. Internet Explorer используется подавляющим числом пользователей во всем мире. Наибольшей популярностью среди браузеров пользуются продукты Mozilla Firefox и Opera. Разгораются жаркие споры, пользователи пытаются выяснить, какой же из этих двух продуктов удобней, быстрей, мощнее. Данный спор, на самом деле, бесконечен. Mozilla Firefox и Opera – это два противоположных взгляда на построение взаимодействия пользователя с Сетью. Оба браузера основаны на отличных от Internet Explorer движках — Presto (Opera) и Gecko (Mozilla Firefox).


Слайд 4
Текст слайда:



Какие бывают Web-страницы?

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

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

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


Слайд 5
Текст слайда:

2. HTML – язык гипертекстовой разметки.


Слайд 6
Текст слайда:


HTML Первые шаги.

Hyper
Text
Markup
Language


Слайд 7
Текст слайда:

Создание Web-сайтов реализуется
с использованием языка
гипертекстовой разметки – HTML (HyperText Markup Language).


Слайд 8
Текст слайда:

История создания HTML

Некоторые даты:
1945 год: американский ученый, научный консультант президента Ванневар Буш (Vannevar Bush) высказывает идею гипертекста.
1968 год: Дуглас Энджельбарт (создатель программного диалогового интерфейса, который реагировал на действия специального указателя - курсора, а так же создатель манипулятора - мыши) демонстрирует работу гипертекстовых связей в созданном им текстовом процессоре.


Слайд 9
Текст слайда:

1960-е годы: сотрудники компании IBM взялись за решение задач переноса документов между различными платформами и операционными системами. Результатом их усилий стал язык GML (General Markup Language - общий язык разметки), который предназначался для использования на ЭВМ семейства IBM. Язык GML в дальнейшем был расширен, а в 80-х годах прошёл стандартизацию ISO (Международная организация стандартизации). Этот мощный и универсальный режим разметки, названный SGML (Standart General Markup Langugage), использовался военным ведомством США для оформления технической документации. Однако SGML широкого распространения не получил ввиду своей сложности и дороговизны реализации.

Некоторые даты:


Слайд 10
Текст слайда:

1980-е годы: учёный-физик Тим Бернерс-Ли, сотрудник CERN (Европейский Центр Ядерных Исследований) в Женеве в конце 80-х годов занялся проблемой хранения и отображения данных, полученных коллегами. Проблема состояла в том, что каждый специалист, приезжавший в Центр, применял собственные методы представления информации, и срочно требовалось создание универсальной системы, которая не зависела бы от используемой компьютерной платформы и в то же время была бы достаточно простой. В основу разрабатываемого языка Тим Бернерс-Ли положил язык SGML и приёмы работы с гипертекстом, с чем и связано название созданного им языка - HTML. Новый язык использовал основные конструкции SGML для описания документов и гипертекстовых ссылок.

Некоторые даты:


Слайд 11
Текст слайда:

Термин "гипертекст" впервые был введён Тедом Нельсоном в 1969 году.

Гипертекст – электронный документ, содержащий в себе ссылки на другие документы.


Слайд 12
Текст слайда:

Главные причины популярности HTML:

Простота.
Переносимость.
HTML-документ – это гипертекст.


Слайд 13
Текст слайда:

3. Создание
HTML-документа


Слайд 14
Текст слайда:

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

HTML-файл имеет расширение .htm или .html


Слайд 15
Текст слайда:

Язык HTML

HTML = Hypertext Markup Language (язык разметки гипертекста)

HTML-страница – это текстовый файл (Блокнот):



Моя страница


Привет!



index.html




Слайд 16
Текст слайда:

ТЭГИ

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


Слайд 17
Текст слайда:

Тэг всегда начинается со знака «меньше» (<) и оканчивается знаком «больше» (>) Например:

ПРАВИЛА ЗАПИСИ ТЭГОВ


Слайд 18
Текст слайда:

ТЭГИ

ТЕГ

одиночный

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

открывающий < >

закрывающий


Слайд 19
Текст слайда:

Тэги

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

непарные тэги


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


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


...

открывающий

закрывающий

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


Слайд 20
Текст слайда:

4. Структура
HTML-документа


Слайд 21
Текст слайда:

СТРУКТУРНЫЕ ТЭГИ

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

Типичная Интернет-страница состоит из двух частей: заголовка (HEAD) и тела (BODY).


Слайд 22
Текст слайда:



Мой первый шаг


Здравствуйте, это моя первая страница.


Добро пожаловать!


Структура HTML-документа


Слайд 23
Текст слайда:

СТРУКТУРНЫЕ ТЭГИ

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


Слайд 24
Текст слайда:

Указанная вами строка-название будет выводиться в заголовке окна браузера, когда данная страничка будет в нём просматриваться, а также (уже после размещения страницы в Интернете) в списках, выдаваемых поисковыми серверами.

СТРУКТУРНЫЕ ТЭГИ


Слайд 25
Текст слайда:

5. Процесс создания
и сохранения
HTML-документа


Слайд 26
Текст слайда:

Простейшая Web-страница



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


Привет!



first.html


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

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


Привет!

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



Простейший пример


Слайд 27
Текст слайда:

После сохранения
в окне браузера
мы видим следующее:





ЗАГОЛОВОК

СОДЕРЖАНИЕ


Слайд 28
Текст слайда:

ПРИМЕР HTML-ДОКУМЕНТА



<ТIТLЕ>Моя первая Интернет-страничка!


Это моя первая проба сил в построении сайтов.
Может быть, страничка пока еще получилась
не очень красивой, но ведь она работает!



Слайд 29
Текст слайда:

Создание WEB-страниц в блокноте.

Открыть программу БЛОКНОТ.
Написать в нем код WEB-страницы.
Сохранить этот документ на Рабочем столе под любым именем (англ. символы) с расширением .html.
Документ должен получить значок или


Открыть этот документ двойным щелчком. (Откроется программа-браузер).
Если нужно внести изменения в документ, то выполнить команду ВИД⇨Просмотр HTML-кода (Исходный текст). Текст WEB-страницы откроется в блокноте.
Внести в текст изменения. Сохранить его (Ctrl+S), перейти в программу-браузер и нажать кнопку ОБНОВИТЬ.

или


Слайд 30
Текст слайда:

Алгоритм сохранения
HTML-документа


Слайд 31
Текст слайда:

Алгоритм сохранения HTML-документа

Меню ? Сохранить как …
Выбрать папку для сохранения (например, Рабочий стол).
Выбираем ТИП ФАЙЛА ? Все файлы





Слайд 32
Текст слайда:

4. В поле «ИМЯ ФАЙЛА» необходимо ввести любое название вашего документа на английском языке или транслитом (например, first).
5. После названия необходимо поставить точку и указать стандартное расширение данного документа .html

На экране Вашего монитора:

6. После указания всех пунктов необходимо нажать кнопку «СОХРАНИТЬ».
7. После сохранения файл должен обозначиться значком того браузера, который по умолчанию используется на Вашем компьютере.


Слайд 33
Текст слайда:

Выполните
первое
практическое задание
за компьютерами
в программе Блокнот


Слайд 34
Текст слайда:

ПОВТОРЕНИЕ!


Слайд 35
Текст слайда:



Мой первый шаг


Добро пожаловать!


Структура HTML-документа


Слайд 36
Текст слайда:

6. Комментарии


Слайд 37
Текст слайда:


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

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

Пример:
...


Слайд 38
Текст слайда:

Комментарии, расположенные внутри элемента TITLE (как, впрочем, и любые другие теги) трактуются как текст и будут видны в заголовке окна.
Иначе говоря, тег внутри TITLE не действует.

ВАЖНО!!!


Слайд 39
Текст слайда:



Комментарии могут встречаться в документе где угодно и в любом количестве.

Не ленитесь комментировать все, что написали. Это волшебное правило сэкономит вам немало времени при попытке разобраться в собственном творении пару месяцев спустя.


Слайд 40
Текст слайда:

7. АТРИБУТЫ тегов


Слайд 41
Текст слайда:

Атрибуты тегов

<тег атрибут=значение атрибут=значение ...>содержимое тега

У тегов есть свои настройки, которые позволяют влиять на результат их работы.
Эти настройки называются АТРИБУТАМИ.
Атрибут может иметь одно или несколько значений.

Таким образом общий вид команд HTML выглядит так:

<ТЕГ атрибут="значение">

Значение атрибуту задается с помощью знака равенства, а само значение заключается в кавычки и вся эта конструкция пишется без пробелов!


Слайд 42
Текст слайда:

Тэг
Этот тег выводит название HTML-документа и браузер показывает его в заголовке окна.
То есть, если в Вашем документе присутствует, например, такая запись: Моя первая Web-страница,
то браузер покажет ее так:

ЗАГОЛОВОК HTML-ДОКУМЕНТА



Слайд 43
Текст слайда:

8. МЕТА-тэг


Слайд 44
Текст слайда:

META-теги — это необязательные атрибуты, размещенные в заголовке страницы, которые могут содержать ее описание, ключевые слова к ней, информацию об авторе, управляющие команды для браузера и поисковых роботов, и прочую служебную информацию, не предназначенную для посетителей. Многие из поисковых систем на сегодняшний день активно используют META-теги. Использование META-тегов позволит поисковому роботу правильно и быстро отыскать ваш сайт в сети.
МЕТА - тег не виден в браузере при просмотре страницы, но если Вы хотите, чтобы Ваш сайт находился в числе первых, выдаваемых поисковыми машинами при запросах пользователей, то Вам нельзя игнорировать использование МЕТА - тега.


МЕТA - теги размещаются в любом месте заголовка страницы, т.е. между тегами … .      

МЕТА-тег


Слайд 45
Текст слайда:










Составные части МЕТА-тега: HTTP-EQUIV, Name и CONTENT.

1) Поле "name" ("имя") определяет, за что именно данный тег отвечает. 2) Длина каждого поля "content" ("содержимое") ограничена 1024 знаками, включая пробелы и знаки препинания. Мета-теги включены в код страницы, чем их больше, тем больше объём страницы, а, следовательно, больше время загрузки страницы. Обычно поисковые системы используют обрезанные до определённой длины значения этих полей.
 3) Поле "http-equiv" означает, что данный тег предназначен не для поисковой системы, а для управления браузером.
 

Примеры популярных мета-тегов:


Слайд 46
Текст слайда:

Указывает кодировку, в которой написана страница.

META HTTP-EQUIV="Content-Type" CONTENT="text/html;
Charset=Windows-1251">

Обязательный мета-тег

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


Слайд 47
Текст слайда:

9. Форматирование
текста
с помощью
языка HTML


Слайд 48
Текст слайда:

Большинство HTML документов имеют заголовок. Для его создания используют теги <Нn>…, где n - число от 1 до 6. ВЫВОД: Заголовки имеют теги в интервале от H1 … H6


Заголовок документа


Заголовок раздела


Заголовок подраздела


Заголовок параграфа


Комментарий

Авторские пометки


9.1) Заголовки


Слайд 49
Текст слайда:


переход на новую строку – одиночный тег





абзац (с отступами) обозначается тегом


И вечный бой! Покой
нам только снится

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

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

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


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


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


9.2) Абзацы


Слайд 50
Текст слайда:

9.3) Выравнивание текста


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



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


Значения атрибута align:
left - по левой границе
right - по правой границе
center - по центру
justify - по ширине

атрибут тэга

называется ALIGN (выравнивание)


Слайд 51
Текст слайда:

Пример выравнивания


Слайд 52
Текст слайда:

9.4) Тэги для обозначения стиля текста

Можно комбинировать теги стилей:
Полужирный курсив


Слайд 53
Текст слайда:

Примеры:


Слайд 54
Текст слайда:

Использование нескольких
тэгов одновременно
(комбинирование)

Полужирный курсив



Каждый тэг
должен закрываться симметрично
по правилу математических скобок


Слайд 55
Текст слайда:


9.5) Размер текста

Некоторые теги могут или должны применяться с определенными параметрами, которые указываются в открывающемся элементе тега.

Для работы со шрифтом, его размером и стилем используется контейнер тегов

Открывающий тег может иметь несколько атрибутов:

1) SIZE - задает размер текста (по умолчанию размер текста равен 3).
Поместив текст между тегами , где n - цифровое значение.

Пример 1
Пример 2
Пример 3
Пример 4


Слайд 56
Текст слайда:


2) FACE - задает стандартное имя шрифта. Используйте шрифты, которые установлены на компьютере пользователя, в противном случае браузер будет использовать шрифт, определенный по умолчанию (обычно Times New Roman).


Слайд 57
Текст слайда:


3) COLOR - задает цвет текста (по умолчанию черный - #000000).

Красный
 
Красный

Цвет текста может определятся 2 способами:
С помощью английских слов red, blue и т.д.
В 16-ричном виде - #FF0000 (красный)
#0000FF (синий).

Примеры:


Слайд 58
Текст слайда:

Выполните практическую работу
в программе БЛОКНОТ:
«Стилевое оформление текста
на web-странице»


Слайд 59
Текст слайда:

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


Слайд 60
Текст слайда:



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

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





Ещё примеры:

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

Пёс весил 12 кг.

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

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



Слайд 61
Текст слайда:

9.7) СПИСКИ


Слайд 62
Текст слайда:

а) Маркированные списки


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

unordered list (неупорядоченный список)

list item (элемент списка)

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


    ...

disk ∙
circle ○
square ■



Слайд 63
Текст слайда:

б) Нумерованные списки


  1. Вася
  2. Петя
  3. Коля

ordered list (упорядоченный список)

изменение нумерации:


    ...

1, i, I, a, A




Слайд 64
Текст слайда:

в) Списки определений


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

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

definition term (термин)

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



Слайд 65
Текст слайда:

г) Многоуровневые списки

  • Города России       



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




      
  1. Москва   
  2. Санкт-Петерург

      
  1. Киев   
  2. Одесса



Слайд 66
Текст слайда:

Web-страницы. Язык HTML и др.

Тема 4. Гиперссылки


Слайд 67
Текст слайда:

Ссылки на другие страницы сайта

Таблицы

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

anchor (якорь)

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

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

Пример

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

Текст

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


Слайд 68
Текст слайда:

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





Слайд 69
Текст слайда:

Ссылки на другие сайты

Почта

на главную страницу сайта

index.htm, index.html, default.asp, …

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


Васин текст

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


Скачать


Слайд 70
Текст слайда:

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


Глава 1

Глава 2


Глава 1


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

Наверх

Глава 2


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

Наверх





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

Цвет текста

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

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


Слайд 71
Текст слайда:

Запуск почтовой программы


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



Слайд 72
Текст слайда:

Web-страницы. Язык HTML и др.

Тема 5. Оформление документа. Стилевые файлы (CSS)


Слайд 73
Текст слайда:

Содержание и оформление

Сборник задач по физике


Григорий Остер


Задача 61

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

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

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




оформление

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

main.css

mini.css

print.css


Слайд 74
Текст слайда:

Логическая разметка


Слайд 75
Текст слайда:

Фон страницы (через CSS)

body {
background: url(back.jpg);
}

'images/back.jpg'
'../images/back.jpg‘
'http://www.vasya.ru/images/back.jpg'

#6e5c62;



Слайд 95
Текст слайда:

Рисунки в документе





из той же папки:

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

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

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

source (источник)


Слайд 96
Текст слайда:

Выравнивание


left

right

top

bottom
(по умолчанию)

middle


Слайд 97
Текст слайда:

Отступы



VSPACE
(vertical space)

HSPACE
(horizontal space)




Слайд 98
Текст слайда:

Выравнивание и отступы (CSS)


img.left {
float: left;
margin: 5px 10px;
}


= VSPACE

= HSPACE

= ALIGN

margin: 5px 10px 5px 0;




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


Слайд 99
Текст слайда:

Другие атрибуты

Моя фотография

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

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

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


Слайд 100
Текст слайда:

Рисунок-гиперссылка


ALT="Бесплатная почта" BORDER=0>


Таблицы

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

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

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

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


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



Слайд 101
Текст слайда:

Web-страницы. Язык HTML и др.

Тема 7. Таблицы


Слайд 102
Текст слайда:

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







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

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

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


Слайд 103
Текст слайда:

Размеры


...

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

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


...

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

строки:

ячейки:


...

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


Слайд 104
Текст слайда:

Размеры (через CSS)

table.spec {
width: 60%;
height: 300;
}

table.spec tr {
height: 50px;
}

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

строки:

ячейки:

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


...



Слайд 105
Текст слайда:

Выравнивание


VALIGN="top">



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


...

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

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

left,
center,
right

left,
center,
right

top,
middle,
bottom


Слайд 106
Текст слайда:

Выравнивание (через 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


Слайд 107
Текст слайда:

Фон и цвет текста










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

цвет фона

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


Слайд 108
Текст слайда:

Фон и цвет текста (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");
}

цвет фона

рисунок


Слайд 109
Текст слайда:

Отступы

BGCOLOR = blue>




1 2

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

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

CELLSPACING

CELLSPACING

CELLPADDING

CELLPADDING


Слайд 110
Текст слайда:

Отступы (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


Слайд 111
Текст слайда:

Объединение ячеек










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








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

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

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


Слайд 112
Текст слайда:

Вложенные таблицы




















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




122
3334444


Слайд 113
Текст слайда:

Web-страницы. Язык HTML и др.

Тема 8. Фреймы


Слайд 114
Текст слайда:

Фреймы

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

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


Слайд 115
Текст слайда:

Описание структуры

index.html



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






columns
столбцы

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

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

source
источник

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


Слайд 116
Текст слайда:

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


...


...

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

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


Слайд 117
Текст слайда:

Настройка фрейма (FRAME)

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

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

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

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


Слайд 118
Текст слайда:

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

index.html



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



NAME="qq">


строки

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


Слайд 119
Текст слайда:

Сложные структуры (3 фрейма)

index.html














Слайд 120
Текст слайда:

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


TARGET="qq">Глава 2


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


Слайд 121
Текст слайда:

Web-страницы. Язык HTML и др.

Тема 9. Блоки (DIV)


Слайд 122
Текст слайда:

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



Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nunc libero, semper ac feugiat sed, sollicitudin et mauris.





1



Слайд 123
Текст слайда:

Блоки (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;
}


Слайд 124
Текст слайда:

«Плавающие» блоки


.picture {
float: left;
margin: 5px;
}
.picture p {
margin: 0;
text-align: center;
font-family: sans-serif;
font-size: 80%;
font-weight: bold;
}




На природе



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

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


Слайд 125
Текст слайда:

Web-страницы. Язык HTML и др.

Тема 10. Понятие о Javascript


Слайд 126
Текст слайда:

Что может Javascript?

информация статична
нет интерактивности (только переход на другую страницу)

Чем плоха HTML-страница?

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

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

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


Слайд 127
Текст слайда:

Основные принципы

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

HTML + Javascript = DHTML (Dynamic HTML)


Слайд 128
Текст слайда:

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


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

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

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

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

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


Слайд 129
Текст слайда:

Скрытый блок





.hidden {
display:none;
}



Слайд 130
Текст слайда:

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




onClick="show('details');return false;">
Показать детали

остаться на странице

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

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


Слайд 131
Текст слайда:

Скрытый блок: как его открыть?

function show ( name )
{
var elem = document.getElementById(name);
if ( elem )
elem.style.display = "block";
}




test.js



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

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


Слайд 132
Текст слайда:

Формы




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

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

имя формы

имя элемента

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


Слайд 133
Текст слайда:

Форма: обращение к элементам

function check()
{
if ( calc.answer.value == "4" )
alert("Правильно!");
else alert("Неправильно!");
}

test.js


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


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

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

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

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

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


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

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